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Diseho de paginas web con Dreamweaver 



PONTIFICIA 

UN I VERS I DAD 
CATOLICA 

DEL PERO 



EXPLORANDO MIS CONOCIMIENTOS PREVIOS 




r 

iMuy bien! Las imageries corresponden a paginas web 
que brindan informacion sobre diferentes tematicas. 
La primera es una web de musica, la segunda de 
juegos de video y la tercera es de negocios. 



dSera posible que podamos elaborar 
alguna de ellas? <LQue programa se 
utilizara? <LSera facil? 
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PONTIFICIA 

cat^lica AD Diseno de paginas web con Dreamweaver 

DEL PERU 



iBienvenidos al curso! 



Efectivamente, tu con este curso podras disenar, editar y crear contenidos 
web. El programa que se utiliza es Dreamweaver, que es sencillo y 
divertido; con la practica llegaras a construir paginas como estas o sobre el 
tema que mas te interese. 

El curso comprende cinco unidades, en cada una se ha planteado diversas 
actividades, las cuales debes realizar, puesto que te permitiran 
comprender las funcionalidades de las herramientas del programa y 
aplicar lo aprendido. Asimismo, al termino de cada unidad, encontraras la 
seccion "iCuanto aprendi?" y en la seccion "Integrando lo aprendido", 
realizaras una actividad que te dara pautas para desarrollar tu proyecto 
final. 

Te invito a que leas atentamente cada capitulo del curso, desarrolles cada 
actividad, asi como el proyecto final. 
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Diseho de paginas web con Dreamweaver 
Capitulo 1 

APRENDIENDO SOBRE DREAMWEAVER CS4 




PONTIFICIA 

UN I VERS I DAD 
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1.1 CONCEPTO Y UTILIDAD DE DREAMWEAVER 

Dreamweaver es un software que nos permite disenar, crear y editar una web de manera 
sencilla sin la necesidad de ser un experto en lenguaje HTML. 



Actividad de investigacion: 

1. Investiga las ventajas y desventajas de Dreamweaver. 

2. Averigua que es el lenguaje HTML y su uso en la creacion de paginas web. 



1.2 DESCUBRIENDO EL ESPACIO DE TRABAJO: BARRA DE APLICACIONES 



de bienvenida en donde encontraremos opciones 
para abrir un documento, crear un nuevo 
documento, entre otras. 



Para ingresar al espacio de trabajo de 



Abrir un elemento reciente Crear nuevo 

DREAMVVEAVEfVingreso_texto.html g) HTML 

■Q DREAMWEAVER/pr...a-cochina.html ColdFusion 



Dreamweaver, haz die en: 



ADOBE DREAMWEAVER CS4 


m \ W*AUWEAV£IWnor«»_tex1o MM 

OPtAUWtAVWp, M 


ASPveSenpt 
-• CSS 


Memento* deslacados 

cxK»«ite d« aattx 






| ComMtt*a« COO J*y»SCTpI 
LJ Hte 


Q CoTOnur a tratutar . 


■ 


Adobtjft Oiw««weavef« CS4 
XXanc* Im Jam» ajo«r«no«. podCMtt r 







Elementos destacados 

Archrvos relacionados 



[TTll Vista en v^o 



La pantalla que aparece es la del espacio de trabajo, como se muestra a continuacion: 



11 



PONTIFICIA 

UNIVERSIDAD 

CATOLICA 

DEL PERO 



Diseho de paginas web con Dreamweaver 




» D Ct lOQX - 962. S03- K/lt 



/ II is U 11 ThJo 





McervVnoJo 






It 






fatfaheruoncal 




M* 


B 


Intertar enqueue* 


i- 


Image** 


* 


Meda 


& 


Server -S«Je:ndude 


Q 




0>- 


head 


<> 


Sonj* 


B- 


Selector deeaqjetas 



• :• e»jpo 
I % M 
!a ScrMdorcsFTPy 



Ahora te explicaremos cada uno de los elementos: 
A. Barra de aplicaciones: 

Archivo Edition Ver Inserter Modificar Forrnato Comandos Sitio Ventana Ayuda | 0 ▼ 

En ella, encuentras todas las funciones que se pueden realizar con 
Dreamweaver. Muestra tambien el tipo de espacio de trabajo que Disenador ▼ 
estas utilizando e inclusive te brinda un buscador on line tipo Google. 



B. Barra de herramientas Documento: 



^Cocfcgo — DivkJt j»J Diseno | ^ Vista en vivo | ▼ ^ ^TftutoM)c^ f»<> p£ Corny obar pagjna 



Codgo | Oividir 


Diseno 


B 


Vista previa en Firefox 


F12 1 


Vista previa en Explore 


Vista previa en Device Central 


Ctrl. Art. F12 


Edrtar lista de navegadores... 





Muestra principalmente las pestanas con 
todos los documentos actualmente abiertos 
y te da la posibilidad de variar la vista del 
documento que estas trabajando: modo 
codigo, diseno o ambos al mismo tiempo 
(dividir); para los propositos del curso, trabajaras en el modo Diseno. 
Tambien puedes ver el titulo de tu pagina y tus avances por medio 
del Internet Explorer u otros exploradores (como Firefox o Chrome). 







Comun ▼ 




^ hfcpervinoio 




l'» *i Vinculo de correo electronic 


9 


o&> Andaje con nombre 




f-?» Regla horizontal 




1-71 Tabla 




[3 Inserter ebqueta Drv 




SI . Imageries 




^3- Media 




f?f Fecha 




Server -Side Indude 




Comentano 




fl> - Head 




Script 








g Selector de ebquetas 
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C. Panel Insertar: 

Esta imagen muestra iconos de acceso directo a las principales opciones para insertar 
hipervi'nculos, imageries, tablas, multimedia, plantillas, etcetera. 



Este menu te sera de mucha ayuda para la animacion y 
diseno de tu web. 



D. Inspector de propiedades: 



Propiedades 



[Ohtml I 
fecss 





Formato [Nnguno ▼ 


Clase N.nguna ▼ B 7 S= £= il il Tituk) 


ID Ninguna ▼ 


Vinculo v (JQ Desbno 



Propie dades de la pagina. . . 



Elemento de lista... 



Siempre que selecciones cualquier texto, imagen, video, cuadro u otro elemento de tu 
web, en esta parte se mostraran las propiedades de dicho objeto seleccionado. Con el, 
puedes realizar modificaciones basicas asi como establecer vmculos e hipervmculos. 



E. Panel Archivos: 



Con esta herramienta, podras monitorear las carpetas que forman parte de tu proyecto: 
las imagenes, videos, archivos de sonido, los documentos HTML que estes trabajando, 
etcetera. 

Estilos CSS I 




- K Esaritork) 

>. Equipo 
S ^1 Red 

& Servidores FTP y . . . 
O Qementosdeesc... 



F. Ventana Documento: 

En esta parte, ingresaras el texto, imagen y cualquier otro elemento. El modo de 
visualizacion y trabajo es similar al de Word. 
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Actividad de aplicacion 



En esta actividad, debes identificar cada uno de los elementos que aparecen en el entorno de 
trabajo de Dreamweaver y senalar su principal funcionalidad. 




Nombre de los elementos 


Funcionalidad 


A 




B 




c 




D 




E 




F 
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1.3 INGRESO Y EDICION DE TEXTO 

Observa la siguiente imagen: 



BOLETIN DE NOTICIAS ESCOLARES 

Las noticias que te mantienen al di'a 



Lunes 7 de marzo de 201 1 



Ho empezodo este nuevo oiVo escolar. con mochas novedades y mucho entusiosmo. Es inevitable no sentir una gron emocion de reencontrarte con los amigos y amigas para verlos todos los d(as 
nuevamente. Se ven coras nuevas y tambien hay otras que no vemos (pero que los llevamos en nuestro corazon). El recreo es de lo mas esperado para poder compartir las vivencias del verano. 
dComo sera este ano' Esperamos que sea el mejor de todos para todos 0 



Creo que estos meses de vacaciones nos han respuesto a todos. pero claro, nos han dejado con ganas de mas tiempo libre, sobre todo porque hemos podido realizar todas nuestras actividades que 
nos interesan mas alia del colegio. como ir la cine, al teatro. via jar. o simplemente descansar en la comodidad del hogar sin preocupacion de Boreas y estudios. Bueno. no en todos los casos. donde 
algunos deben de haber aprovechodo en estudiar ingles, f ranees u otra lengua. u otros cursos o talleres. como el de clown, de teatro. de musica. percusion, etc. Lo que mas me gusttf del verano fue: 



L Aprender a toe ar tambores. 

2. Mart es de cine. 

He visto todas las peliculas que f ueron 

3. El taller de clown :o): 

o Lunes y miercoles de nances, 
o La ropa clown, 
o Los juegos. 

4. Empezor mi blogil 



is aprendidas este verano.-quiero ensenarle a 



Actividad 1: 
Construye un boletm de noticias escolares, que al finalizar 
se vea como la imagen. Para ello, realiza cada una de las 
actividades que te llevaran a su construccion. 



Ahora sigue cada uno de los pasos que te permitiran desarrollar la actividad 1: 

a. Creando un nuevo documento 
Pasol 

Crea en el Escritorio una nueva carpeta llamada Dreamweaver donde guardaras todos tus 
archivos y documentos del curso. 



No te olvides de elegir Crear nuevo HTML para ingresar al espacio de trabajo: 



Dw 



ADOBE DREAMWEAVER CS4 



Abrir un elemento reciente 


Crear nuevo 


HJ>) OREAMVVEAVEfVingreso_texto.html 


1 a ht, W 


t5 DREAM WEAVE R/pr html 




t£) DocumentsAJntitied-2 asp 





Elementos destacados 



Archrvos relaoonacJos 

al:l 



Vata en vrvo 



Paso 2 

Guarda el nuevo documento en Guardar como...: 



Dw 


Archrvo Edioon Ver Invertar 


ModnVar Formato 


Comando* Srbo Ven tana Ayuda ■ - O - & ■ 


Untrti 


Nuevo... 


Ctrl- r J 






Abfir-. 

Exammar en Bridge.-. 
Abfif reoente 


CtrUO 

Ctrl. Ah. 0 


Tt»Jo: Documents «r«xA> A". C dJ. t**. F< Comprobar pagna 








Abnr en marco ... 
Cerrar 


Ctrt.Mayut.O 

CM»W 






Cerrar todot 


Ctrl.Maywt.W 






Compart* mi pantaHa... 


Ctrl.S 






| Guardar <omo..^^_ 


ClH»Mayui.S 






Guardar todo 1 ^^^^ 








Guardar en tervfl -^p.. 








Guardar como fl^^L \ 















15 



PONTIFICIA 

UNIVERSIDAD 

CATOLICA 

DEL PERO 



Diseho de paginas web con Dreamweaver 



Paso 3 

Busca la carpeta Curso de Dreamweaver en el Escritorio. 

Antes de guardar, no te olvides de nombrar el documento: ingreso_texto y seleccionar como 
tipo de archivo la opcion HTML Documents. 



O" Guardar como 



Guardar en: ,. CURSO DE DREAMWEAVER & $ \ f 

i Nombre Fecha de modrfica... Tipo 

Ningun elemento coincide con el criteria de busqueda. 

Sitios recientes 



Bibliotecas 



r>greso_texlo html 



1 Gjuardar " 



I>po HTML Documents f htm.* html.* hta.* htc.-xhtml) 



3 C 



Rai'z dd sttoj 
Formulano de nor mas 



«I (.!m i .. l .!.'.- l !.'.!.t.!Jj. l ,. l .kt.. 1 - 
| Induir firms Unicode (BOM) 



Recuerda siempre que al 
colocar un nombre a 
cualquier documento, debes 
evitar los espacios entre 
palabras. Reemplazalo con el 
guion (-) o el sub guion (_). 



b. Ingresando texto 



Paso 1 

Comienza ingresando el titulo y subtitulo de tu blog, para lo cual debes hacer die en la ventana 
Documento (espacio en bianco). 



ingreso_texto.html* 



Codigo 



Dividir 



Diseno 




© tjfr Direction: file:///C|AJsers/eH p amos/Doajments/eH p amos/mABAJOA): 



Boletin de Noticias Escolares (coloquen el nombre que quieran para el boletin) 
Las noticias que te mantienen al dia (colocar el subtitulo que deseen) 



Paso 2 

Ya tienes el encabezado, ahora continua con la primera entrada del boletin. Cada noticia podra 
constar de tres partes: fecha, titulo y cuerpo. 



ingreso_texto.html* x L 



;\TRABAJO\DIRINFO\28. Dream 



Codigo | Dividir | Diseno | Codigo en vivo p-^f Vista en vivo Inspecbonar (<f^ Tftulo: Documento sin titulo 

|j <)3 Q ^ Direccidn: I file:///C|AJsers/e-ramosA)ocuments/e-ramos/TRABAJOA5IRINFO/23.Dreamwe ~ I (HJ^ 



Boletin de Noticias Escolares (coloquen el nombre que quieran para el boletin) 
Las noticias que te mantienen al dia (colocar el subtitulo que deseen) 
[Limes 7 de marzo de201lj(o la fecha que deseen) FECHA 



[Comenzando la primera semana de clasesnj(o el titulo que deseen comparer) TITLI LO 



| Ha empezado este nuevo ano escolar, con muchas novedades y . j(ingresar un parrafo de 3 tineas que desarrolle el tema escogjdo) CUERPO 
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ENTRADA 



ingreso_texto.html* 1 



„>| Codigo J ^fj Dividir [ ^| Disefio | *| Vista en vivo | ▼ 



Tfojlo: Documento sin ti'tulo £ft„ ^ ^ f ?>, >»» T4, Comprobar pagina 



ENCABEZADO 



BLOG DE ALEXITO 

Mi vida de cabeza... pero siempre divertida! 



hmes 20 de Diciembre del 2010 



Comenzando la ultima semana de clases! 



Ya solo queda una semana de clases, y despues, las merecidas vacaciones de verano. Tiempo de sobra para pasarla con los amigos, ir a la playa y tal ves estudiar un 
poco. Siempre y cuando apruebe en todos mis cursos, en Quimica aun estoy enla cuerda... si solo el profe no me hubiera bajado puntos por aquella broma en el 
laboratorio, jajaja, unos cuantos cueteciHos en el volcan de JuKo no eran para tanto xD En fin, a portarme bien esta ultima semana, sera dificil pero lo hare, no quiero que 
nada se interponga en mi verano perfecto. 



Actividad de investigacion: 



1. Investiga por lo menos 5 actividades que podrias informar en el Boletin de 
Noticias Escolares. 

2. Busca y visita 10 boletines de informacion. Revisa los diferentes estilos 
utilizados en ellos. 

V / 

c. Editando el encabezado - tamano de letra 



Primero, editaras el encabezado y, en una segunda parte, el resto del cuerpo del boletin. Si 
deseas, puedes cambiar el titulo de tu boletin para hacerlo mas atractivo o colocar todo el 
titulo en mayusculas. 

Paso 1 

Selecciona el titulo del blog: 



OLE TIN DE NOTICIAS ESCOLARES 



Las noticias que te manu'enen al dia 

Lunes 7 de marzo de 201 1 

j j Comenzando la primer a semana de clases! ! 



Paso 2 

Luego, dirigete al Inspector de propiedades y en la opcion Formato selecciona Encabezado 1. 




i 



Con esta opcion, puedes 
diferenciar rapidamente el 
titulo de un parrafo. Tienes 
varias opciones de encabezado. 
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Paso 3 

El resultado sera el 
siguiente: 
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BOLETIN DE NOTICIAS ESCOLARES 

Las noticias que te mantienen al dia 

Lunes 7 de marzo de 201 1 

i jComenzando la primera seniana de clases! l| 



Actividad de aplicacion: 

Selecciona el subtitulo y modificalo como Encabezado 3. IQue observas? 



d. Editando el encabezado - color de letra 



Paso 1 

Despues de modificar el tamano del texto, 
ahora le cambiaras el color. Para ello, 
selecciona nuevamente el ti'tulo. 



BOLETIN DE NOTICIAS ESCOLARES 



Las noticias que te mantienen al dia 

Limes 7 de marzo de 201 1 

j jComenzando la primera semana de clases! ! 



Paso 2 

Luego, dirigete al Inspector de propiedades y haz die en "CSS" (el programa esta 
predeterminado en "HTML"). 



| <> HTML I Formato [Encabezado 1 ▼) Clase Ninguna 

Vinculo 



| feCSS I ID 



Ninguna 



B I IE ;E ti ii Tftulo 
w Destino 



Propiedades de la pagma... ] [Bemento de hsta.. 



En las opciones de "CSS", dirigete a Regla de destino y selecciona Nuevo estilo en Imea. 





<> HTML | Remade destino 


T\luevo estilo en \inea> 


Id 


Fyente Fuente predeterminada ▼ B I E S = = 




H jeva regla 




Tamano Ninguno ▼ - ] |~"J \ | 




< Nue va regla CSS > 








Aplicar clase 






[ Propiedades de la pagna... ] 











Paso 3 

A continuacion, da un solo die en 
el que quieras. 



para acceder a la paleta de colores y selecciona 



<body>|<hl>| 



Propiedades 



<> HTML Regla de destino <Nuevo estilo en tinea > ▼ Fuente Fuente predeterminada 
| fa CSS I [ Edrtarregto^ PandCff ~| | lamano Ninguno ▼ Q 



Propiedades de la pagina.. 
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Cada color tiene un codigo que se utiliza para editar en HTML. 
Negro = #000000 



Paso 4 

Como resultado, veras que tu titulo cambio de color. 



BOLETIN DE NOTICIAS ESCOLARES 



Las noticias que te mantienen al dia 



Actividad de apiicacion: 

1. Cambia el color del texto del subtitulo. 

2. Busca en Internet los codigos para obtener colores. 



J) 



PONTIFICIA 

UN I VERS I DAD 
CATOLICA 

DEL PER0 



e. Editando el encabezado - extras 

Tambien puedes cambiar el lugar del texto con referenda a su ubicacion horizontal: a la 
izquierda, centrado, o a la derecha, e inclusive justificar. 

Cambia el titulo a la derecha, para ello, vuelve a seleccionar el titulo y realiza los siguientes 
pasos: 



Paso 1 



En lo posible, debes editar 
un solo elemento a la vez. 



Regresa al Inspector de propiedades. Dentro de las opciones de CSS, encuentras los siguientes 
botones, debes escoger el que movera el texto a la derecha. 



Propiedades I 



< > HTM. Regla de desbno < estilo en linea > 



fecss 



Editar regla 



Panel CSS 



Fuente Fuente predeterminada ▼ B / 

Tamano Ninguno ▼ [ *363 



Propiedades de la pagina... 



Paso 2 

Este es el resultado: 



BOLETIN DE NOTICIAS ESCOLARES 

Las noticias que te mantienen al dia 

Lunes 7 de marzo de 201 1 

j jComenzando la primera semana de clases! ! 

Ha empezado este nue\ o ano escolar, con muchas no^ r edades y mucho entusiasmo. Es ine\itable no sentir una gran emocion de reencontrarte con los amigos y amigas 
para verbs todos los dias nue\ r amente. Se ven caras nuevas y tambien hay otras que no vemos (pero que los llevamos en nuestro corazon). El recreo es de lo mas 
esperado para poder compartir las vivencias del verano. G C6mo sera este ano° Esperamos que sea el mejor de todos para todos :). 



Actividad de apiicacion: 

1. Cambia la ubicacion del subtitulo a la derecha. 

2. Centra todo el encabezado. 
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f. Editando el cuerpo del boletm utilizando reglas CSS 

Ahora edita el contenido del boletm. Como en todo boletm, tendras decenas de noticias, por lo 
que debes crear una regla para modificar rapidamente cada parte (fecha, ti'tulo y cuerpo), 
segun sus propias caractensticas. 

Para ello, identifica las 3 partes de esta entrada: 



Lunes 7 de marzo de 2011 
jjComenzando la primera semana de clases!! 



V 



Ha empezado este nuevo ano escolar, con muchas novedades y mucho entusiasmo. 
Es inevitable no sentir una gran emocion de reencontrarte con los amigos y amigas 
para verlos todos los dias nuevamente. Se ven caras nuevas y tambien hay otras 
que no vemos (pero que los llevamos en nuestro corazon). El recreo es de lo mas 
esperado para poder compartir las vivencias del verano. iComo sera este ano? 
Esperamos que sea el mejor de todos para todos :). 



Luego, sigue los siguientes pasos: 



Paso 1 

Edita primero la fecha. 



Lunes 7 de marzo de 201 1 



j jComenzando la primera semana de clases! ! 



Ha empezado este nuevo ano escolar : con muchas novedades y mucho entusiasmo. ] 
para verlos todos los dias nuevamente. Se ven caras nuevas y tambien hay otras que 
esperado para poder compartir las vivencias del verano. ^Como sera este ano" 7 Espe 



Paso 2 

Crea una Nueva regla 

CSS para tu fecha 

(previamente 

seleccionada): 




Regla de destno | <Nueva regla CSS> 
Nueva regla 

<Nuevo estilo en b'r 
A plica r dase 



Paso 3 

Con esta opcion 
seleccionada, le das 
die en Editar regla. 





Fyente Fuente predetermnada 
lamano Mnguno ▼ 

[ Propiedadesdelapagna... ] 



- b i m m m 



Aqui comienzas a crear una Nueva regla CSS. Te 
servira de punto de partida mas adelante para 
editar el titulo y cuerpo de la entrada. 



Propiedades 
<> HTML 




Regla de destino <Nueva regla CSS > ▼ 
[ BdltarrJ^JJ Panel CSS 


Fuente Fuente predeterminada ▼ B / Bj = 9 = 


I fecss | 


lamano Nmguno ▼ 
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Luego, aparece una nueva ventana en donde a la nueva regla le nombraras fecha. 



Nueva regla CSS 
Tipo de selector 

Ekja un hpo de selector contextual para la regla CSS. 



Clase (puede ser aplicable a cualqu»er etemento KTMI ▼ 



Bija o introduzca un nombre para el selector. 



/\ Norn 
/ / Elrjai 



[ Aceptar ] 



Nombre del selector 

o introduzca un nombre para el selector. 



fecha 



Def.mc.on de regla: 

Ehja donde sevaa definir la regla. 



Este nombre de selector aplicara la regla a 
todos los elementos HTML con dase "fecha". 



(Soto este documento) 



Luego, da die en Aceptar. 



Nueva regla CSS 
Tipo de selector 

Elrja un bpo de selector contextual para la regla CSS. 

[ Clase (puede ser apfccabte a cuatquter etemento HTM ▼[ 



Nombre del selector 

Elrja o introduzca un nombre para el selector. 

fecha 




Paso 4 

En la nueva ventana, llamada 
Definition de regla para tftulo, tendras 
todas las opciones de edicion CSS 
disponibles para el objeto seleccionado 
(seran diferentes de acuerdo a la 
naturaleza del objeto: texto, imagen, 
video, tabla, etcetera). 



Debes modificar: 

• La fuente (Font-family) 

• El tamano de letra (Font-size) 

• El estilo (Font-style) 



Definicion de regla para .titulc 
Categoria Tipo 



Cuadro 

Borde 

Lista 

POSICKXI 

Extensiones 



Font-family: 
Font-size: 
Font-sjyle: 
Line-rieight: 



Font-weight: 
Font-variant: 



Text-decorabon: underline 
overline 
hne-through 

□ bWc 

□ rjone 



Text -transform: 



Ayuda 



Apkar 



Actividad de investigacion: 

iPor que el programa te da a escoger "familias de fuentes" en vez de 
"fuentes individuales"? 
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Paso 5 

Edita el tipo de fuente. 
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Definicion de regla para .titulo ^ I^^SmJ 


Categori'a 


Tipo 


ida 




Tipo 








Fondo 
Bloque 
Cuadro 
Borde 


Font-famiy: I [▼ 
Verdana, Geneva, sans-serif 
Font-sjze: Georgia, Times New Roman, Times, serif 




de 




1Mb 
Posraon 
Ex ten si ones 


Courier New, Courier, monospace 
Font-style: Arial, Helvebca, sans-serif 

Tahoma, Geneva, sans-serif 
Line-height: Trebuchet MS, Anal, Helvebca, sans-serif 
Anal Black, Gadget, sans-serif 
Text-decora tjo Times New Rornan » Times, serif 

Palatino Linotype, Book Antigua, Palatino, serif 










"■Luada Sans Unicode, Luoda Grande, sans-serif 










MS Serif, New York, serif 

Ludda Console, Monaco, monospace 

Comic Sans MS, cursive 

Editar hsta de fuentes... 










HJQpne 








| Ayuda | [ Aceptar | [ Cancdar | [ Apfcar | 











Definicion de regla para .fecha 



Paso 6 

Edita el tamano de letra. 





Font-family: "luoda Sans Unicode', luoda Grande*, sans-serif 
P |px ^] Font-weight: 
Font-variant: 
ax ▼ ] Text -tr.ans form: 
Color: Q 



J 



Aceptar 



Paso 7 

Edita el estilo de letra. 



Definicidn de regla para .fecha 



Categori'a 



Tipo 



Fondo 

Bloque 

Cuadro 

Borde 

Usta 

Posioon 

Extensiones 



Font-family: luoda Sans Unicode', luoda Grande', sans-serif 
Font-size: 12 ▼ [px ▼] Font-weight: 

Font-style: ▼ Font-variant: 



Line -height: 



normal 



Text-decora bon: underline 
overline 

□ Sne-through 

□ ynk 

□ none 



Ayuda 



Text-transform: 
Color: £3 



Aceptar 



Apfcar 1 
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Paso 8 

Despues de los cambios, le das die en Aceptar. Para visualizar la edicion en el texto, lo 
seleccionas y en la seccion HTML del Inspector de propiedades, dirigete a las opciones de 
clase y selecciona la regla escogida fecha. 










Ninguna 


T 



Vinculo 



tunes 7 de marzo de 20 J J 



j jComenzando la prim era s em ana de clases! ! 

Ha empezado este nuevo ano escolar : con muchas novedades y mucho entusiasmo. Es k 
para verlos todos los dias nuevamente. Se ven car as nuevas y tambien hay otras que no s 
esperado para poder compartk las vrvencias del verano. ^Como sera este ano" 7 Esperam 



Actividad de aplicacion: 

Aplica los pasos del 1 al 4 para el tftulo de la noticia. Debes llegar 
hasta la ventana Definicion de recla oara... 



Paso 9 

Ahora, para el tftulo, realiza la siguiente edicion y denommalo "titulo" sin tilde: 

• La fuente (Font-family) 

• El grosor de la fuente (Font-weight) 

• El color 

• El fondo (background-color) 



Paso 10 

Edita la familia de 
fuentes. 




Fondo 
Bloque 
Cuadro 
Borde 
Lista 
Posicion 
Extiensiones 



Font-family 



Font-size 
Font-style 
Line -height: 



Verdana, Geneva, sans-serif 
Georgia r Times New Roman, Times, serif 
Courier New, Courier, monospace 
Arial r Helvetica, sans-serif 

Trebuchet MS r Arial, Helvetica, sans-serif 
Arial Black, Gadget, sans-serif 
Text-decoratio Time3 ^ ew Romar| r Times, serif 

Palatino Linotype, Book Antiqua, Palatino, serif 
Lucida Sans Unicode, Lucida Grande, sans-serif 
MS Serif, New York, serif 
Lucida Console, Monaco, monospace 
Comic Sans MS, cursive 

Editar lista de fuentes. . . 

V~\ none 



Estilo de letra: 
"Tahoma" 



Ayuda 



Aceptar 



Aplicar 
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Paso 11 

Edita el 
grosor de 
la fuente. 
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Definicion de regla para .titulo 



Categona 


Tipo 






Fondo 


Font-family: 


Bloque 


Cuadro 




Borde 


Font-size: 


Lists 




Position 


Font-style: 


Extensiones 


Line-height: 



Font-weigh 



Font-variant: 



normal i 



bolder 

Text-transform: lighter 
100 



Text-decoration: | | underline 
I I overline 

□ line-through 

□ blink 

I I none 



Color: l - ^ 




Grosor de 
letra: "Bold" 



Paso 12 

Edita el color del 
texto. 



Definicion de regla para 




Tipo 



Font-family: Tahoma r Geneva r sans-serif 
Font-size: ▼ [px 

Font-style: 
Line -height: 



Text-decoration: | | underline 
I I overline 
I I line-through 

□ blink 

□ none 



Ayuda 



Font-weight: bold 
Font-Variant: 



px ^] Text-transform: 



Color de letra: 
"Blanco" = #FFF 




Aceptar ] [ Cancelar ] [ Aplicar 



Paso 13 

Para cambiar el color 
de fondo, debes 
cambiar la categona a 
Fondo. 



Definicion de regla para .titulo 



Categoria 




Background -color: |~J 
Background -image : 
Background -repeat: 
Background -attachment: 
Background -position (X): 
Background-poabon (Y): 



Ayuda 



Aceptar 



Ap, am 
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Paso 14 

De ahi, selecciona la opcion 
Background-color y cambia 
el color a guinda oscuro 
(#900) o el que tu elijas 
(teniendo en cuenta que la 
letra sera de color bianco). 



Definici6n de regla para .titulo 



Categon'a 



Bloque 

Cuadro 

Borde 

Lista 

Posioon 

B rt e n rtona 
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Background -repe ■ 
Background -a ttachmen t :| 
Background-position Q0: I 
Background-position (Y): 



Ayuda 



Cancelar Apkar 



Paso 15 

Para finalizar y salir de la ventana, le das 
die en Aceptar. 

Repite de manera similar el paso 8 para terminar de editar el titulo. El resultado de la edicion 
del titulo de la entrada es el siguiente: 




Lunes 7 de marzo de 20 J J 



iComenzanda la prim era semana de clases! 



Ha enrpezado este nuevo ano escolar : con muchas novedades y mucho entusiasmo. Es in 
para verios todos los dias nuevamente. Se ven caras nuevas y tambien hay otras que no \ 
esperado para poder compartir las wencias del verano. ,,C6mo sera este ano^ Esperam 



Paso 16 

Solo falta editar el cuerpo. Comienza. 



Actividad de aplicacion: 

1. Nombra a la nueva regla: "cuerpo" 

2. Realiza todos los pasos, de acuerdo a lo explicado anteriormente 

3. Edita lo siguiente, teniendo en cuenta: 

— Font: Comic Sans 

— Font size: 14 

— Font weight: lighter 

— Color: a tu eleccion 

— En la categoria Bloque, colocas Text align: justificar 



jFelicitaciones! 

Ya estas dominando los principios basicos de la edicion de 
texto. Ahora observa el resultado de tu trabajo: 




PONTIFICIA 

UNIVERSIDAD 

CATOLICA 

DEL PERO 



Diseho de paginas web con Dreamweaver 



BOLETIN DE NOTICIAS ESCOLARES 

Las noticias que te mantienen al dia 



Lunes 7 de marzo de 201 1 



iiComenzando la primera semana de clases! 



Ha empezado este nuevo ano escolar, con muchas novedades y mucho entusiasmo. Es inevitable no sentir una gran emocidn de reencontrarte con los amigos y 
amigas para vcrlos todos los dias nuevamente. Se ven caros nuevas y tambien hay otras que no vemos (pero que los llevamos en nuestro corazdn). El recreo es 
de lo mas esperado para poder compartir las vivencias del verano. CComo sera este ano? Esperamos que sea el mejor de todos para todos :). 



V 



Actividad de aplicacion: 

Para demostrar el uso practice* y la ventaja de trabajar con reglas 
CSS en la edicion de texto, escribiras una nueva entrada: 



Crea la nueva entrada con la fecha, titulo y contenido 
relacionado al tema "vacaciones". 

Piensa que deberas utilizar una lista para mencionar los 

lugares o actividades que mas te gustaron. 

Aun no trates de editar el texto, primero ingresa toda la 

informacion. 

Detente antes de comenzar a crear la lista, te ensenaremos 
paso a paso como hacerlo. 



Ya tienes el cuerpo de la entrada y estas listo para ingresar la lista (el texto en letras negras es 
lo recien ingresado). 



BOLETIN DE NOTICIAS ESCOLARES 



Las noticias que te mantienen al dia 



Lunes 7 de marzo de 201 1 



iComenzando la primera semana de clases!! 



Ha empezado este nuevo ano escolar, con muchas novedades y mucho entusiasmo. Es inevitable no sentir una gran emocidn de reencontrarte con los amigos y 
amigas para verbs todos los dias nuevamente. Se ven caras nuevas y tambien hay otras que no vemos (pero que los llevamos en nuestro corazdn). El recreo es 
de lo mas esperado para poder compartir las vivencias del verano. CComo sera este ano? Esperamos que sea el mejor de todos para todos :). 

06/03/11 

Pero que buenas vacaciones... 

Creo que estos meses de vacaciones nos han respuesto a todos, pero claro, nos han dejado con ganas de mas tiempo Kbre : sobre todo porque hemos pocHdo reaKzar 
todas nuestras acthidades que nos interesan mas alia del colegio : como ir la cine : al teatro : viajar o simplemente descansar en la comodidad del hogar sin preocupacion 
de tareas y estudios. Bueno : no en todos los casos, donde algunos deben de haber aporvechado en estudiar ingles, frances u otra lengua, u otros cursos o talleres, como 
el de clo\vn : de teatro : de miisica, percusion, etc. 



g. Creando listas y sublistas 




Algunas veces, necesitaras enumerar o listar informacion para tener un 
mejor orden, para ello se crearon las listas y sublistas, que te permitiran 
un manejo adecuado para su presentacion. <LEstas preparado para 
ingresar una lista? Ahora te explicaremos como debes hacerlo. 
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1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las pelkulas que flieron nominadas al Oscar. 

3. El taller de clown :o) : 

° Lunes y miercoles de narices. 
° La ropa clown. 
n Losjuegos.j 



Actividad 2: 

Crea listas y sublistas, como observas en la 
imagen. 



Sigue cada uno de los pasos a fin de que realices la actividad: 
Paso 1 

Haz die en el icono de Lista ordenada en el Inspector de propiedades (esta opcion esta 
disponible en la seccion HTML): 

• Lista sin ordenar (simbolos) 

• Lista ordenada (numerica o alfabetica) 



Seccion 
HTML 



Propiedades 



<>KTMl| I Formato Parrafb 



ID Ninguna 



Clase Ninguna 
Vinculo 



- B I (1=1= 



Propiedades de la pagma 




;bno 



Elemento de lista 




En la ventana Documento, veras como aparece el numero "1" espaciado con sangria: 



Pero que buenas vacaciones... 

Cr eo que estos meses de vacaciones nos han respuesto a tod 
as nueltfc^s actKidades que nos interesan mas alia del cole 
de tareas y es\dios. Bueno : no en todos los casos : donde ale 
el de clown. de)teatro : de musica, percusion. etc. Lo que mas 



i I 



Paso 2 

Ingresa el texto y para continuar con el siguiente elemento de la lista simplemente das Enter y 
el cursor bajara creando el siguiente numero de esta (en este caso el "2"): 



de tareas y estudios. Bueno : no en todos los ca 
el de clowTL de teatro : de musics percusion, et 

1 . Aprender a tocar tambores. 



4 



'ENTER' 



todas nuestras actKidades que nos interesan mas i 
de tareas y estudios. Bueno : no en todos los casos 
el de clown, de teatro : de music a, percusion, etc. 3 



1 . Aprender a tocar tambores. 
2. 
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Paso 3 

Tambien tienes la posibilidad de crear un espacio sin que el progama lo entienda como un 
nuevo numero en la lista. Simplemente, en vez de apretar solo Enter, lo haces en combinacion 
y al mismotiempo: Enter+Mayusculas. 




1 . Aprender a tocar tambores. 

2. Martes de ciie. 



'ENTER+MAYUSCULAS" o "ENTER+SHIFT" 



Para regresar a la 
numeracion, solo tienes 
que dar Enter normal. 




1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que flier on nominadas al Oscar... A _ A 



Paso 4 

Ingresa un nuevo 
elemento para el cual 
tendras que utilizar una 
sublista. 

Paso 5 

Presiona Enter y saldra un 
nuevo numero. 



1. Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que fiieron nominadas al Oscar... A _ A 

3. El taller de clown :o) : : 



1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que fiieron nominadas al Oscar... A _ A 

3. El taller de clown :o) : 



Paso 6 

Para crear la sublista, dirigete al Inspector de propiedades y haz die en Sangria de texto. 



Propiedades I 



| OkTM| Forma to Nnguno 



3 CSS 



ID Ninguna 




Paso 7 

Para tener una sublista con simbolos, le das die en el icono Lista no ordenada (ubicada en el 
Inspector de propiedades). 



Propiedades 



<>KTML| Forma to Nnguno 



3 CSS 



ID Ninguna 



Clase Ninguna 
Vinculo 



- B I 



Propiedades de la pagina. 
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Luego, tienes una sublista 
diferenciada con simbolos. 



1. Aprender a to car tambores. 

2. Martes de cine. 

He visto todas las peHculas que fueron noinitiadas al Oscar... A _ A 

3. El taller de clown :o) : 



Paso 8 

Completa la sublista con tres o 
cuatro elementos adicionales. 
Recuerda que para crear un nuevo 
elemento solo tienes que dar 
Enter. 




1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peHculas que fueron norninadas al Oscar... A _ A 

3. El taller de clown :o) : 

° Lunes y miercoles de nances. 
° La ropa clown. 
° Losjuegos.j 



Luego de escribir los subpuntos, dcomo puedo regresar 
a la lista general (la numerical? 



Tendras que seguir los siguientes pasos: 



Paso 9 

Primero, presiona Enter para 
crear un nuevo espacio. 



1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peHculas que fueron norninadas al Oscar... A _ A 

3. El taller de clown :o) : 

° Lunes y miercoles de narices. 
° La ropa clown. 
° Losjuegos. 



Paso 10 

Luego, haz die en el icono de Lista ordenada. 







±3 ±i TTtuto 


feCSS ^ ID Nmguna ▼ Z vinculo 


1 Destmo 


Propiedadesdelapagina... | eI 







Paso 11 

Veras como el simbolo 
fue reemplazado por 
un numero. 



1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peHculas que fueron norninadas al Oscar.. A _ A 

3. El taller de clown :o) : 

° Lunes y miercoles de narices. 
° La ropa clown. 
■ .. a -.LQ5-jliegG5 . b 

1 : 
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Paso 12 

Para finalizar, le das die en el icono de Anular sangria de texto (ubicada en el Inspector de 
propiedades). 



Propiedades 



| <> HTML | Forma to Nnguno ▼ Clase Nmguna B I :E 



3 CSS ID Nmguna ▼ Vinculo 



Propiedades de iapagrta... | [Bemei 



TTtuJo 
tino 



Como resultado, regresaras a 
la lista de origen, continuando 
con la numeracion en donde 
te has quedado: 



1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que fiieron nominadas al Oscar.. A _ A 

3. El taller de clown :o) : 

° Lunes y miercoles de nances. 
° La ropa clown. 
-°- JLca fuegoa.- . . . 

4. Empezar mi blog! i| \ 



dQue debo hacer para regresar a escribir en parrafos ; 
despues de haber terminado con la lista? 



Paso 13 

Presiona Enter. 




1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que fiieron nominadas al Oscar... A _ A 

3. El taller de clown :o) : 

° Lunes y miercoles de narices. 
° La ropa clown. 
a Losjuegos. 
. .4, Empezar mi blogj [ „ 
5. : 



Paso 14 

Haz die en el icono Anular sangna de texto. 



Propiedades 



[<>html| 


Forma to 


Ninguno 


H 


Clase Ninguna 


▼ B I 




fecss 


ID 


Nmguna 




Vinculo 







Propiedades de la pagma.. 
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Luego, estaras otra vez en el formato normal del parrafo para terminar de completar tu 
entrada. 



06 03 11 

Pero que buenas vacaciones... 

Creo que estos meses de vacaciones nos han respuesto a todos : pero claro : nos han dejado con ganas de mas tiempo Hbre : sobre todo porque hemos podido 
realizar todas nuestras acthidades que nos interesan mas alia del colegio : como ir la cine : al teatro : \iajar : o simplemente descansar en la comodidad del hogar sin 
preocupacion de tareas y estudios. Bueno : no en todos los casos : donde algunos deben de haber aprovechado en estudiar ingles, frances u otra lengua, u otros 
cursos o talleres, como el de clown, de teatro : de miisica, percusion, etc. Lo que mas me gusto del verano me: 



1 . Aprender a tocar tambores. 

2. Martes de cine. 

He \isto todas las peliculas que fueron nominadas al Oscar.. . A _ A 

3. El taller de clown :o) : 

0 Lunes y miercoles de narices. 
° La ropa clown. 
0 Los juegos. 

4. Empezar mi blog! ! 

■. 

Demasiadas cosas nuevas aprendidas este verano... quiero ensenarle a mis amigos todo lo que aprendL.| I 



Paso extra 

Tienes a disposicion mas opciones de edicion de listas, para acceder a ellas, primero selecciona 
el elemento que deseas editar (solo un elemento) y despues haz die en el icono Elemento de 
lista... 



Propiedades 




(<>html| 


Formato [ttnguno ▼] Oase Nmguna ▼ B I (!=)»= tl tM Tituk) 


h CSS 


ID Nmguna ▼ Vhaio ' 


' Q Q Desuno 






Proptedades de la pagma... 


| [ Elemento deksta... ] 









Saldra la siguiente 
ventana donde 
podras editar la lista 
seleccionada con mas 
detalle: 



Propiedades de lista 



Tipode lista: Lista con numer os 



Estilo: [[Predeterminado] 
Inidar recuento: 



Elemento de lista 



Nuevo estilo: [ [Predeter mmado] 
Rest, recuento a: 



(Numero) 



(Numero) 



Aceptar 



Cancelar 



Ayuda 



Actividad de apiicacion: 

En el boletm que estas elaborando, crea una lista de seis puntos 
(como mmimo) y dos sublistas. 
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h. Uso practico de las reglas CSS 

Ahora edita la fecha de tu boletm. 



06 03 11 

Pero que buenas vacaciones.. 



Fecha 



Creo que estos meses de vacaciones nos han respuesto a todos : pero claro : nos han dejado con ganas de mas tiempo libre : sobre todo porque hemos podido 
realizar todas nuestras acthidades que nos interesan mas alia del colegio, como ir la cine : al teatro : \iajar : o simplemente descansar en la comodidad del hogar sin 
preocupacion de tareas y estudios. Bueno : no en todos los casos : donde algunos deben de haber aprovechado en estudiar ingles, frances u otra lengua, u otros 
cursos o talleres, como el de clown, de teatro : de musica, percusion, etc. Lo que mas me gusto del verano fue: 

1 . Aprender a tocar tambores. 

2. Martes de cine. 

He visto todas las peliculas que fueron nominadas al Oscar.. . A _ A 

3 . El taller de clown :o) : 

0 Lunes y miercoles de narices. 
" La ropa clown. 
0 Los juegos. 

4. Empezar mi blog!! 

Demasiadas cosas nuevas aprendidas este verano... quiero ensenarle a mis amigos todo lo que aprendi...| 



No sera necesario pasar por todos los pasos que recorriste en la edicion de la entrada anterior 
debido a que ya has creado reglas. Ahora simplemente busca la opcion Clase y selecciona 
fecha. 



Propiedades I 



< > HTML Format© Parrafb 



£bCSS 



ID Nmguna 



| Clase 
Vinculo 



▼ ^ B I •= \E ±M ±M Tjtulo 



T (JQ Destino 



| Semen to de hsta.. 




Cambiar nombre... 
Adjuntar hoja de esti'los. 



En la opcion Clase, 
encontraras todas 
las reglas que has 



Como veras, el texto seleccionado toma 
inmediatamente el formato de la fecha de la 
anterior entrada, de esta forma ahorras tiempo 
y se agiliza la edicion de texto en tu web: 



06/03/ n 

Pero que buenas vacaciones.. 

Creo que estos meses de vacaciones nos han respi 
realizar todas nuestras actividades que nos interesa 
preocupacion de tareas y estudios. Bueno : no en tc 
cursos o taUeres. como el de clown, de teatro. de i 



Actividad de apiicacion: 

Te invito a que realices la siguiente actividad: 
Edita el titulo y el cuerpo de tu web. 
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Como resultado final, tendras tus dos 
entradas con los mismos formatos. Ahora 
estas preparado para ingresar todo el 
texto que quieras y editarlo en el menor 
tiempo posible: 
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BOLETIN DE NOTICIAS ESCOLARES 




Creo que estos meses de vococrones nos hon respoesto a todos, pero cloro. rvos htm dejodo con ganas de mds tiempo libre, sobre todo porque hemos podido 

hogor sin preocupacidn de tareas y estudios. Bueno. no en todos los casos. donde alqunos deben de haber oprovechodo en estudiar ingles, frances u otra 
lengoa. u otros cursos o talleres, como el de clown, de teatro. de mtisica, pencusidn. etc. Lo que mas me gusto del verono fue: 

2. Martes de cine. 

He visto todas las peliculas que fueron nominadas al Oscar...' 

3. £l taller de clown :o) i 

: Lunes y miercoles de nances, 
o La ropa clown. 



I. Empezor mi blogll 



i. Titulo para tu primera pagina web 

El titulo es importante porque es el nombre que se vera en las pestanas de cualquier 
navegador. 

Para aprender a hacerlo, sigue los pasos que te presentamos a continuacion: 
Paso 1 

Dirigete a la barra de herramientas Documento y, en la opcion Titulo, coloca el nombre que 
deseas, en este caso el titulo sera: Boletm Marzo 2011. 



ingreso_texto.html* x 


Ruta: C:\UsersWEGA\Desktop\CURSO C 


^C6dK>0 


^jOvidr 


jl)Diseno 




* | Vista en vivo 




Titulo: Documento sin titulo 


at 4>. 



\^ El til 



Titulo : Bole t'n Marzo Z0 1 1 



x 



titulo de la pagina tiene diferente funcion que el 
nombre del archivo (ingreso_texto.html), por eso deben 
ser diferentes. 



j. Visualization de tu documento en el navegador 

Si bien Dreamweaver te permite observar tu web tal y como se vena en los navegadores, 
siempre es recomendable — de cuando en cuando — que veas los avances en un navegador 
real. Por motivos de compatibilidad, utiliza Internet Explorer para verificar. 

Ahora aprenderas a hacerlo, para ello, sigue los pasos que te presentamos a continuacion. 

Paso 1 

Busca el icono de Vista previa en la barra de herramientas Documento y le das die: 



Paso 2 

Te mostrara varias opciones con todos los 
navegadores que tengas instalados en tu 
computadora. Escoge Vista previa en 
Explorer o Vista previa en Firefox: 



® T pSSv ( Titulo: Boletfn Ma rzo 2011 



Vista previa en Firefox 


F12 


Vista previa en IExploil 




Vista previa en DeviceWkV 


Ctrl+Alt+F12 


Vista previa en Adobe BrowsftrLab 


Ctrl+Mayus+ F12 


Editar lista de navegadores... 
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Automaticamente se abrira el navegador Internet Explorer o el Firefox y mostrara tu web tal y 
como se vena en la realidad. 



Tambien hay otra manera abreviada que te da el 
mismo resultado: el boton F12: 

Al presionarlo, se te preguntara si deseas guardar los 
cambios, das Aceptar y automaticamente iras hacia la 
pantalla del navegador a vertu web. 





BOLETIN DE NOTICIAS ESCOLARES 



Las notlcias qur te maoticmn al dia 



Ha empejado este nuevo anb escolor, con nuchas novedades y mucho entuSKumo Es inevitable no sentir una gran emocidn de reenconlrarle con los amigos y amigas para verbs todos los dias 
nuevomente. Se ven caras nuevas y tambien hay otros que no vemos (pero que los llevamos en nuestro corazdn) El recreo es de lo mas esperodo para poder compartir las vivencias del verano. 
cC'omo sera este o/lo> Esperamos que sea el mejor de todos para todos :). 

06 03 II 



Creo que estos meses de vacaciones nos han respuesto a todos. pero cloro. nos han dejado con ganas de mas tiempo libre. sobre todo porque hemos podtdo realizar todas nutslras actnndades que 
nos inter esan mas olid del coleoio. como ir la cine, al teatro. viojor, o simplemente descansar en la comodidod del hogor sin preocupocidn de t areas y estudios. Boeno. no en todos los casos. donde 
algunos deben de haber aprovechado en estudior ingles, trances u otra lenguo. u otros cis-sos o talleres. como el de clown, de teatro. de musica. percusidn etc. Lo que mas me gustd del verano 

hm 

L Aprender a tocar tambores. 

2 Martes de cme. 

He visto todas las peKculas que fueron nommadas al Oscar. *_* 

3 El taller de clown o) I 

I Lunes y miercoles de nances 
s La ropo clown. 

4. Empejar mi blogK 




BOLETIN DE NOTICIAS ESCOLARES 

Las noticias que te mantienen al dia 



Ho empendo este nuevo ofto cscolor. con muchos novedodes y mucho entustasmo Es inevitable no scntir una gran emocioh de reencontrorte con los amtgos y amigas para verlos todos los dias 
nuevomente Se ven caras nuevas y tambien hay otros que no vemos (pero que los llevamos en nuestro coraidn) El recreo es de lo mas csperado para poder compartir las vivencias del verano 
CLdmo serd este aflo? Esperamos que sea el mejor de todos para todos ) 



pucsto a todos. pero cloro. nos han dejodo con gc 
e. al teatro. via jar o simplemente descansar en 
ingles. Irancit u otra lenguo u otros cursos o tal 



le fueron nommadas ol Otcor " _' 



y miercoles de nances 



4 Empemr mi blog* 

Demasiadas cosos nuevas aprendidas este verono quiero ensenarle o mis amigos todo lo que aprendL. 



Es en estos lugares del navegador donde se vera el titulo de la pagina, lo cual permitira que 
distingas esta de las demas. 



Primer caso: I g& Boletin Marzo 2011 



Segundo caso: 



Firefox T 



U Boletin Marzo 2011 



T3 



Actividad de investigacion: 

Investiga las funcionalidades que ofrece las opciones de la ventana 
de edicion de listas. 
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dCUANTO APRENDI? 




Muy bien, ya has terminado con el estudio de este capitulo, 
ahora te invito a que tu mismo evalues cuanto has aprendido. 
Para ello, desarrolla las actividades que te proponemos a 
continuacion. 



1. Relaciona con una flecha la columna de la izquierda con la derecha segun sea el caso 

o 



itS HTML 

Enter+Mayusculas 
Boton F12: 

Propiedades 



Crea un espacio sin que el progama lo 
entienda como un nuevo numero de 
una lista. 



Abre e! navegador Internet Explorer o el 



O 
O 



navegador Firefox y muestra el trabajo 
elaborado. 

Comprende diversas opciones de 
edicion CSS y HTML disponibles para el 
objeto seleccionado. 

Es una de las opciones que permite 
empezar el trabajo en Dreamweaver. 



2. Identifica y escribe los numeros que corresponden a los pasos que comprende la 
herramienta que te presentamos a continuacion: 



a. Editando el cuerpo del boletm 
utilizando reglas CSS 



1 Escoge Vista previa en Explorer o Vista 
previa en Firefox. 

2 Modifica la fuente, el tamano de letra y 
estilo en la ventana Definicion de regla 
para titulo. 

3 Busca el icono de Vista previa en la barra 
de herramientas Documento. 

4 Crea una nueva regla CSS para tu fecha. 



Respuesta: 
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3. Senala con una V si es verdadero o con una F si es falso, segun corresponda: 
La barra de aplicaciones muestra distintas opciones de menu. 



a. 
b. 

c. 



La barra de herramientas Documento solo muestra las pestanas 
con todos los documentos actualmente abiertos. 

El panel — Archivos muestra iconos de acceso directo a las 
principales opciones para insertar hipervmculos, imagenes, tablas, 
multimedia, plantillas, etcetera. 

El Inspector de propiedades muestra las propiedades del objeto 
seleccionado. Con el puedes realizar modificaciones basicas asi 
como establecer vmculos e hipervmculos. 



o 
o 

o 
o 





El proyecto integrador tiene dos partes: en la primera elaboraras un 
boletm y en la segunda parte un blog. El primero te servira para difundir 
los contenidos del segundo. Cada capitulo del curso te ensenara un 
conjunto de herramientas que te serviran para su preparacion. A 
continuacion, te damos las indicaciones generales para la primera parte 
del trabaio. 



Antes de leer las indicaciones del trabajo, es importante que aprendas sobre los blogs. Un blog 
es una cronica o bitacora de informacion recopilada con el fin de compartir la informacion, 
puede ir acompanada de textos, fotos, videos, musica, etcetera. La tematica es libre, 
generalmente son diarios personales o de tipo periodistico, educativo, tecnologico, modas, 
etcetera. A continuacion, te presentamos algunos ejemplos. 



— 









•KCMrMUCOMtOriUil 








& 


1 


tunsmo 
escoiar 




Huayllay un 


'"J44 
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Videollamadas Grupales en iPhone y Android con Fnng suosoiiw mm (ouES 



Indicaciones generates para el proyecto (primera parte) 

• El trabajo se realizara de manera individual. 

• El diseno del boletin debes presentarlo en una hoja tamano A4 y sustentarlo, es 
decir, explica la importancia del tema que trataras en tu boletin, recuerda que 
tiene que estar relacionado con la tematica de tu blog. El diseno lo podras hacer 
basado en el modelo que te hemos presentado en esta primera parte, sin 
embargo, a lo largo del curso, aprenderas mayores herramientas que haran mas 
atractivo su contenido y su diseno. 

• La presentacion del trabajo se hara al finalizar el curso, cuando tu profesor(a) lo 
indique. 

£Que debo hacer para presentar la primera parte de mi proyecto? 

1) Busca en la web, boletines que contengan diversas tematicas, ello orientara la 
elaboracion y diseno. Luego, responde a las siguientes preguntas: ipara que sirven los 
boletines? iCuales te han gustado mas y por que? 

2) Define un nombre para tu boletin. 

3) Define el tipo de tema que trabajaras en el boletin, el cual estara relacionado con el 
blog que aprenderas a elaborar en los siguientes capitulos, puede ser de derechos 
humanos, cambio climatico o aspectos que fundamentan la peruanidad: costumbres y 
tradiciones. Por lo menos deberas ingresar 3 noticias. 

4) Determina las caracteristicas de color, fuente, numero de letra que debe tener tu boletin. 

5) Presenta estos datos a tu profesor(a) en un documento en Word. 

6) Sigue los pasos que se plantean en este capitulo para elaborar tu boletin. 
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Capitulo 2 



CONFIGURACION INICIAL Y USO DE PLANTILLAS 



Observa la siguiente imagen e indica que esta 
haciendo el personaje. 





Imagen predisenada 1 





Como has podido observar, el personaje esta 
organizando los papeles que tiene, de acuerdo a color, 
jerarquia, etcetera. Para trabajar con Dreamweaver, la 
dinamica es la misma, pues necesitas organizacion y 
orden para manejartoda la informacion que coloques en 
Internet desde tu web. Por ello, en este capitulo 
aprenderas como configurar la web para trabajar con 

pfiripnria \/ ranirlp7 



2.1 CONFIGURANDO NUESTRO SITIO WEB 



En el capitulo anterior, no realizaste ninguna configuracion, pues el documento que creaste 
era una pagina aislada. Ahora sera diferente, pues crearas una web con varias paginas y 
elementos multimedia enlazados. En la configuracion, elegiras el lugar donde guardaras todos 
los documentos, las imagenes, archivos, fotos, audios, etcetera que usaras en tu pagina. 



1 Imagen tomada de la pagina web 

< http://www.googlexom.pe/imgres?q=organizando+una+web&um=l&hl=es&sa=X&rlz=lR2GGLL es&tbs=itp:clipart&tbm=isch&t 
bnid=MKF6ajR- 

bNQTYM:&imgrefurl=http://www.webquest.es/node%3Fpage%3D123%26list%3D..%252Fkarma%252Findex.htm& 
kFlzYBM&w=256&h=280&ei=NPV4TqzvNMKBgAfQ^^ 

bnw=121&start=151&ndsp=10&ved=lt:429 ) r:0,s:151&tx=55&ty=85 >. Fecha de consulta: 19 de septiembre de 2011 
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Para que aprendas a configurar la web en 
donde trabajaras, sigue los siguientes pasos: 
a. Creando un nuevo sitio 

Paso 1 

Ingresa a Dreamweaver. 
Paso 2 

En la ventana de bienvenida, ubica el menu 
de Crear nuevo y escoge la opcion Sitio de 
Dreamweaver. 



Dw_ cm ~ 


Abiir un elemenlo reciente 

MAMUAL/ngresoJexto html 
75 CURSO DE DREAM resojexto html 
7j DREAMWEAVERAngresoJexto html 
f| DREAM WEAVER/pr e-cochria html 
~; Document*/UnMted-2 asp 
t_> Abnr 


ra mtml 

7j CoUFuaan 

ta 

Q ASPVBScnpt 

71 XSLT<pagriacornpleta) 

ra ess 

-■ JavaScript 

TJ XML 

aQ Slo de Dreamweaver ^ 
t_> M4» Ltf 


Elementos destacados 

Archwos relacenado* 
13 V-taenvrvo 
| 4fr| Navegador de coOgo 
pj— | A»»t«nte conjunto de datos 
| Widgets Web 
|* , | CompattifcJad con JavaScnpt 
CJ Ma* 


J Comenur a trabajar . 

^_ Recurso* > 

A Dreamweaver Exchange > 


Dw 


dobe® Dreamweaver® CS4 
btenga las ulbmas sugerenaas, podcasts y 
udio mas en Adobe Z Bridge Home. 


l~l No vohet a mostrar esta pagina de mic* 



Paso 3 

Se abre la ventana Definition del sitio en 
la cual debes colocar un nombre a tu sitio, 
en este caso le llamaras 
proyecto_dreamweaver. La direccion 
HTTP la dejaras por el momento en 
bianco. Haz die en Siguiente. 



Definition del sitio 

LSB 




le archrvos y carpetas que se corresponden co 



tQue nombre desea asigrw al aDo> 



(Cual es la drecoon HTTP (URL) de su sbo' 
ht«p:// 

Ejemplo: http:/Amw.m£enndor.com/iraSibo 

Si desea trabajar drectamente en el servidor me 
tervtdor FTPoRDS . Si trabaja drectamente en 
eiat» como, por ejemplo, comprobar vihculos o ' 



^anceiar I Avuoa 



Actividad de investigacion: 



Explora y descubre otra forma de ingresar a la ventana Definition del sitio para proyecto 
Dreamweaver. Para ello, puedes iniciar tu investigation en la barra de aplicaciones. 



Paso 4 

Luego, selecciona la 
primera opcion y le 
das die en Siguiente. 



Definicion del sitio para proyecto. 




Comparbendo archivos 



d)esea trabajar con una teoidogia de servidor como ColdFusion, ASP.NET, ASP, JSP o PHP? 



o l^r.no desep utlizar un 
Si, deseo ublizar una tecnologia de servidor 
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La otra opcion es utilizada por usuarios 
avanzados que dominan lenguaje de 
programacion. 




® 



le»r%r 



Paso 5 

En la siguiente ventana, escoge la primera opcion: "Editar copias local 
cargarlas al servidor cuando esten listas". 

dComo desea trabajar con los archivos durante la etapa de desarrollo? 

9 Editar copias locales en mi equipo y luego cargarlas al servidor cuando esten listas (recomendai 
Editar directamente en el servidor utilizando la red local 



mi equipo y luego 



Tambien selecciona la carpeta 
donde se guardaran todos tus 
archivos, documentos, imagenes, 
etcetera: proyecto_dreamweaver 
en el Escritorio de la computadora. 
Luego, le das die a Siguiente. 



<En que lugar del equipo desea almacenar los archivos? 



as 



sersWEGAVDesktoDbrovecto dreamweaver 



carpeta 
utomaticamente. 



Paso 6 



A 



Ninguno 



Por el momento, escoge la opcion Ninguno, pero cuando ya FTP 
tengas un hosting tendras que regresar a editar esta opcion. webDAV 

RDS 

Microsoft $ Visual SourceSafe® 



Despues le das die a Siguiente. 



Paso 7 

Revisa las opciones seleccionadas y le 
das die en Completado. 



Regresa a la pantalla de bienvenida. 

Verifica que tu sitio haya sido creado 
con exito, para lo cual debes verificarlo 
en el panel Archivos. 



Carpeta 'til local: C:lM«r*VVEGAVe*top)proy«cto_<tre«rM«aver\ 



Puede con«ourar aun mia d *«o u( 




Actividad de aplicacion: 

Repite nuevamente los pasos del 1 al 7 y si tienes 
alguna duda consulta a tu profesor. 
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Como te senalamos al iniciar el capitulo, requieres organizar los 
archivos (imageries, fotos, videos, mp3, etcetera), aparte de los 
documentos html, que utilizaras en tu web, ello lo haras a traves 
de subcarpetas, como observas en la imagen que se encuentra 
debajo. Te invitamos a que realices la siguiente actividad. 



Archivos Activos , 








Q proyecto_dreamwi ▼ 


Vista local 


▼ 


& C 0 0 " 


% © 




Archivos locales 


|Tam...lTipo 


B £3 Sitio - proyecto_. . . 


Carpeta 


^ imagenes 


Carpeta 





Actividad 1: 

Crea tres subcarpetas de: 

• imagenes 

• fotos 

• multimedia 



Para realizar esta actividad, sigue los pasos que te presentamos a continuacion: 
Paso 1 

Comenzaremos con la primera. En el panel Archivos, le das die derecho a la carpeta Sitio- 
proyecto_dreamweaver y selecciona Nueva carpeta. 



Archives Activos j 



[iQ proyecto_dreamwi ▼] | Vista local ▼ 



O | O ft 

lTa m...[Tipo 



Archivos locales 



^ Sitio - proyecto_. . 



Carpe 



Paso 2 

A esta nueva subcarpeta creada 
denominaras imagenes: 



la 



Nuevo archivo 
lueva carpeta 




Archivos 






IO proyecto_dreamwi ▼ 


Vista local ▼ 



Archivos locales 



Tarn. 



I Sitio - proyecto_. 
^ imagenes 



► 
► 
► 



Recuerda que al ponerle un 
nombre a las carpetas o 
archivos que subiras a 
Internet no debes utilizar 
tildes o mayusculas. 

r 



Actividad de aplicacion: 

Ahora crea las otras dos subcarpetas: fotos y multimedia siguiendo 
los pasos 1 y 2. 
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c. Edicion de tu sitio 

Si deseas editar tu sitio porque ya tienes un hosting 2 (donde subir tus archivos en la web), 
actualizar los datos o quieres verificar lo que has hecho porque crees que te equivocaste en 
algo, solo debes seguir estos pasos. 



Paso 1 

Dirigete a la barra de aplicaciones y busca el menu 
Sitio, ahi selecciona Administrar sitios. 



Sitio 1 Ventana Ayuda 






Nuevo sitio... 


Administrar sitios... 






Obtener 




Ctrl- Ma> us- D 


Proteger 




Ctri+Art+Mayus+D 


Colocar 




Ctrl* Mayus+ U 


Desproteger 




Ctrl* Art+ May us* U 



Paso 2 

Se abrira una nueva ventana donde encontraras el 
menu de edicion de todos los sitios que se hayan 
creado. Con el boton Editar se presentaran de nuevo 
las opciones que ya has revisado con Definition de 
sitio y podras cambiar las opciones que necesites 
actualizar. 



Las opciones de uso comun 
son las enmarcadas: Nuevo, 
Editar y Quitar. 

2.2 PLANTILLAS 




Administrar sitios 



oyecto dreamweaver 



Listo 



| Nuevo..." 
I Editar... 

Egxxtar... 



Importar.. . 



Ayuda 




Dreamweaver tiene varios modelos de plantillas web que te 
puede ayudar en la diagramacion de tu sitio. Por ejemplo, en la 
imagen se ha utilizado una de las plantillas que ofrece el 

\programa. Para que aprendas a utilizarla, te invitamos a que 
realices la siguiente actividad. 




Actividad 2: 

Crea una plantilla como observas en la 
imagen y despues agregale contenido. 



El hosting es el servicio de alojamiento web que utilizan los usuarios de Internet para poder almacenar 
informacion, fotos, videos u otro contenido a compartir. 
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Sigue los pasos que te presentamos a continuacion, los cuales orientan el desarrollo de la 
actividad: 



Paso 1 

Ve a la barra de aplicaciones y en Archivo selecciona 
Nuevo. 



Paso 2 



Edicion Ver Insertar Modificar Formato 
Nuevo. 



Abrir... 


Ctrl+O 


Examinar en Bridge... 


Ctrl- Alt* 0 


Abrir reciente 


► 


Abrir en marco... 


Ctrl+Mayus+O 


Cerrar 


Ctrl+W 


Cerrartodos 


CtrkMayiis+W 


Compartir mi pantalla... 



Nuevo documento 



Veras emerger la ventana 
Nuevo documento. En la 
seccion de Pagina en 
bianco, selecciona Plantilla 
HTML 




Tipodepagrva: 

*7 HTML 

Plan tia HTML j< 
Bemento de bibdoj^ 

T: XSLT (fragmento) 

"~_ XSLT (pagna compieta) 

"^7 ActwnScnpt 

- CSS 



ASP JavaScript 
ASP VBScnpt 
ASP.NET C» 
ASP.NET VB 
ColdFusion 

Compooerte ce Co dFus c 



li 



Dweno: 

1 coiumna elastica, centrada 
1 coiumna elastica, centrada, encaoe 
1 cokjmaa fya, centrada 
1 coiumna fija, centrada, encabezadc 
1 coiumna flotante, centrada 

1 coiumna flotante, centrada, encabe 

2 columrvas elastoas, barra lateral dei 
2 columnas elasbcas, barra lateral dei 
2 columnas etastxas, barra lateral izq 
2 columnas elasbcas, barra lateral izq 
2 columnas fi)as, barra lateral derecK 
2 columnas fi)as, barra lateral derech. 
2 columnas fi)as, barra lateral izquerc 
2 columnas fijas, barra lateral izquerc 
2 columnas fiotantes, barra lateral de 
2 columnas flotantes, barra lateral de 
2 columnas flotantes, barra lateral izc 
2 columnas flotantes, barra lateral izc 
2 columnas hfcodas, barra lateral den 
2 columnas hfcndas, barra lateral den 

2 columnas ftbridas, barra lateral izqt * 



Tpo de Documento: XHTML 1.0 Trans. tonal -r 



Dtseno CSS en: [AfodraHead" 
Adjuntar archivo CSS: 



| Ayyda | | pjeferendas..r| 



Obtenermascontenido... 



Paso 3 

Luego, en las opciones de diseno, apareceran todas las plantillas disponibles. 



^ Pagina i 
^ 11^ Pagina de plantilla 



Nuevo documento 



I Plantilla en bianco 



Tipo de pagina: 

HTML 
~ Plantilla HTML 

Bemento de biblioteca 
"Tr XSLT (fragmento) 
fl XSLT (pagina compieta) 
fl ActionScript 

CSS 

^ JavaScript 
XML 

1J| ASP JavaScript 

ASP VBScript 
^ ASP.NET C# 
* ASP.NET VB 

ColdFusion 
~" Componente de ColdFusic 
T§ JSP 
^ PHP 



Diseno: 
<ninguno> 



[ Ayuda | [ Preferencias.., 



1 coiumna fija, centrada 



1 coiumna frja, centrada, encabezado y pi< 
1 coiumna flotante, centrada 

1 coiumna flotante, centrada, encabezado 

2 columnas fijas, barra lateral derecha 

2 columnas fijas, barra lateral derecha, en 
2 columnas fijas, barra lateral izquierda 
2 columnas fijas, barra lateral izquierda, er 
2 columnas flotantes, barra lateral derech; 
2 columnas flotantes, barra lateral derechc 
2 columnas flotantes, barra lateral izquierc 

2 columnas flotantes, barra lateral izquierc 

3 columnas fijas 

3 columnas fijas, encabezado y pie 
3 columnas flotantes 




Una coiumna centrada, ancho en pixeles. 



3 columnas flotantes, encabezado y pie Tipo de documento: [ XHTML 1.0 Transitional 
Diseno CSS en: 



[Anadir a Head 



Adjuntar archivo CSS: 



□ Activar InContext Editing 

Ampliar informacion sobre Business Catalyst 

InContext Editing 



Obtener mas contenido... 



[ Crear ] [ Cancelar | 



Ejemplo visual 



Descripcion y 
detalles del 
diseno 



Actividad de aplicacion: 

Revisa todas las plantillas existentes, para darte una idea de como te gustaria 
que fuese tu blog. Luego, describe cuales son sus caracteristicas y senala para 
que tipo de actividad te pueden servir. 
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Paso 4 

A modo de ejemplo, selecciona la primera alternativa y le das die en Crear. 



Nuevo documento 



Pagina en bianco 



Plantilla en bianco 



i Pagina de plantilla — 



Pagina de muestra 



Tipo de pagina: 
°" HTML 

Plantilla HTML 

Elemento de biblioteca 
^ XSLT (fragmento) 
~" XSLT (pagina completa) 
ActionScript 
CSS 

JavaScript 
XML 



ASP JavaScript 
ASP VBScript 
ASP.NET C* 
ASP.NET VB 
ColdFusion 
Componente de ColdFusk 
JSP 
PHP 



Ayuda 



<ninguno> 



1 columna fija, centrada 



1 columna fija, centrada, encabezado y pic 
1 columna flotante, centrada 

1 columna flotante, centrada, encabezado 

2 columnas fijas, barra lateral derecha 

2 columnas fijas, barra lateral derecha, en 
2 columnas fijas, barra lateral izquierda 
2 columnas fijas, barra lateral izquierda, er 
2 columnas flotantes, barra lateral derechi 
2 columnas flotantes, barra lateral derechi 
2 columnas flotantes, barra lateral izquierc 

2 columnas flotantes, barra lateral izquierc 

3 columnas fijas 

3 columnas fijas, encabezado y pie 

3 columnas flotantes 

3 columnas flotantes, encabezado y pie 



Obtener mas contenido.. 




Una columna centrada, ancho en pi'xeles. 



Tipo de documento: | XHTML 1.0 Transitional 
Diseno CSS en: [Anadir a Head 



Adjuntar archivo CSS: 



1 i Activar InContext Editing 

Ampliar information sobre Business Catalyst 
InContext Editing 



D C 



Paso 5 

Luego, regresa automaticamente al espacio de trabajo con la plantilla cargada. En esta 
plantilla, reemplazaras los textos predeterminados por los tuyos. 



Instrucciones 



Titulo 



Tenga en cuenta que la CSS para estos disenos cuenta con numerosos comentarios. Si realiza la mayor parte de 
su trabajo en la vista Diseno, eche un vistazo al codigo para obtener sugerencias sobre como trabaJCESE^fe 
CSS para disenos fijos. Puede quitar estos comentarios antes de lanzar el sitio. Para obtener mas informacion 
sobre las tecnicas usadas en estos disenos CSS, lea este articulo en el Centro de desarrolladores de Adobe: 
http://www.adobe.com/go/adc ess layouts . 



Diseho 



Subtitulo 



Dado que este es un diseno de una sola columna, el .content no flota. Si anade un .footer dentro de .container, 
simplemente seguira a la div de .content. 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem 
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo 
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolore s 
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia doloBSSSpfet, 
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam 
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea 
voluptate velit esse quam nihil molestiae consequatur, vel ilium qui dolorem eum fugiat quo voluptas nulla 
pariatur? 



Cuerpo 



Cuerpo 



Paso 6 

Para editar el contenido, simplemente reemplazas lo predeterminado, en donde se indica el 
titulo, subtitulo y el cuerpo, por tu informacion. 
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Actividad de aplicacion: 

Realiza la siguiente pagina, sobre la cultura Nazca, usando una de las 
plantillas. 



■Culturas Peruanas 




Cultura Chincha 



Paul Kosok, junto 
con los 
I arqueologos 
peruanos Julio C. 
Tello y Mejia T. 

denominaron a 

"el libro mas 
I grande de 

I Scholten 

| realizado a cabo 
investigaciones 

I matematicas para 
determinar la 
medida que se 



Cultura Paracas (Par 



lizacion precolombina que se desarrollo 
is de Peru. Los antecedentes mas 
el siglo I d.c, en la fase final de la 
s Necropolis). La cultura Nazca al parecer es 
cultura Paracas ya que ambas culturas tenian 
las mismas costumbres, tecnicas agricolas y ademas sociedades 
militaristas. El final de la cultura Nazca coincide con la declinacion 
de su ceramica policroma fina y con el dominio de la cultura Huari en 
los anos 800 d.c. 

La cultura Nazca es conocida mundialmente por sus gigantescos 
geoglifos hechos en las tierras altas del desierto de Nazca, cerca de 
la moderna ciudad de Nazca, Peru. Otra notable produccion de esta 
civilizacion son sus acueductos subterraneos muy ingeniosos y su 
magnifica ceramica policroma con motivos zoomorfos generalmente. 

Cronologfa de la investigation sobre la 
civilizacion Nazca 

• 1901: El arqueologo Max Uhle estudia cientificamente la 
civilizacion Nazca 

• 1930: Paul kosok y Maria reiche investigan las lineas de Nazca. 

• 1932: Comienzo de las obras de restauracion de las lineas de 
Nazca por Maria Reiche 

• 1939: Hipotesis de que las lineas de Nazca son un calendario 
astronomica usado para la agricultura. 

• 1976: Dieter Eisleb establece una cronologfa de la civilizacion 

• 1982: Inicio de las excavaciones de Giuseppe Orefici en el sitio 



El pueblo de 

firmemente en 
una vida despues 

llevo a momificar 
a sus cadaveres y 
envolverlos con 

que despues de 
2000 anos 
todavi'a muestran 



muchos otras 



hechos con gran 
habilidad, de 
materiales como 



J 



2.3 MARCOS 



cAlguna vez has escuchado la palabra "marcos"? Probablemente hayas 
escuchado este termino al hacer referenda al marco de una puerta o de 
un retrato. En Dreamweaver, los marcos o frames, permiten fijar algunas 
partes de la web, para poder colocar informacion, fotos, etcetera de una 
manera ordenada para una mejor distribucion de todos los elementos. 
Para que aprendas a utilizarlos, te invito a que realices la siguiente 
actividad. 



Los marcos son areas rectangulares, independientes, que en su conjunto forman una web. 
Sirven para distribuirla eficazmente y su funcionalidad se da principalmente en paginas donde 
hay elementos repetitivos como menus, titulos o banners. 



EFECTO La Tierra debido a su fuerza de gravedad retiene en su superficie al aire y al agua del mar, y para poner a 

INVERNADERO relacion con la superficie del planeta se necesita la energia cuya fuente primaria es el Sol. que emite en todas direcciones un flujo de luz visible o 
proxima a la radiacion %isible, en las zonas del ukra\ioleta y del mfrarrojo 

De acuerdo con los planteamientos de Sadi Carnot acerca del funcionaniiento de la maquma de vapor, se sabe que la transformation de la 
energia termica en energia mecanica no puede ser total Un motor termico requiere de una fuente caHente que suministre la energia termica y una 
fuente fria que la reciba Al considerar a la Tierra como un motor termico, la fuente que suministra la energia termica es la superficie del suelo 
calentada por la radiacion solar y la fuente fria esta locaHzada en las cap as altas de la atmosfera, enfriada conunuamenie por la per did* de 
energia en forma de radiacion mfrarro ja emitida por el suelo caKente hacia el espacio siderai 



La Tierra solamente recibe una pequena canudad de la energia emitida por el SoL La hiz solar no se utihza di 
por lo tanto, es necesario que la atmosfera transforme la energia termica de la radiacion solar en energia race 
para la atmosfera es la superficie del suelo calentada por la hiz solar que hiego es emitida como radiacion 

El efecto invemadero es uno de los principales factores que provocan el calentamiento global de la Tierra, d* 
Damados gases invernadero CO! , HIO, 03 , CH4 y CFC s en la atmosfera. 



Yet teinas relacionados 

Introduccion al Cambio CHmauco Global - Bases teorkas del cambio clmanco global - La Atmosfera - Los 



Actividad 3: 
Utiliza un marco para colocar informacion 
sobre el efecto invernadero, como 
observas en la imagen. Para ello, investiga 
sobre el tema en Internet. 
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Sigue los siguientes pasos para desarrollar la actividad 3: 



Paso 1 

Dirigete a la barra de aplicaciones y, en Archivo, 
selecciona Nuevo. 



Paso 2 

En la seccion Pagina de 
muestra, selecciona 
Conjunto de marcos. 



Archivo I Edicion Ver Insertar Modificar Formato 


Nuevo... Ctrl+N 


Abrir... 


Ctrl+O 


Examinar en Bridge... 


Ctrl+Alt+O 


Abrir reciente 


► 


Abrir en marco... 


CtrUMayiis+O 


Cerrar 


Ctrl-W 


Cerrar todos 


Ctrl*Mayus*W 


Compartir mi pantalla... 



Pagina en bianco 
— -jj^ Plantilla en bianco 
Paojna de plantfla 



Carpeta de muestra: 

Hojas de esbtos CSS 
j Conjunto de marcos 



Pagina de muestra 



Derecho fijo 

Derecho fijo, rfenor antdado 
Derecho fijo, superior arwdado 
Dividido horizon talmente 
Dividido verticalmente 
Inferior fijo 

Inferior fijo, derecho amdado 
Inferior fijo, izqiaerdo amdado 
Izquierdo fijo 

Izquierdo fijo, inferior antdado 
Irquierdo fijo, superior anidado 
SwDer or m cado 
Superior fijo, derecho anidado 




1 



Conjunto de marcos oVickto verbcalmente con 
un marco de tamano fijo en la parte derecha. 



Pagina de muestra: 



Paso 3 

A modo de ejemplo, escoge el izquierdo 
fijo, inferior anidado y dale die en Crear. 




Derecho fijo 

Derecho fijo r inferior anidado 
Derecho fijo r superior anidado 
Dividido horizontalrnente 
Dividido verticalmente 
Inferior fijo 

Inferior fijo r derecho anidado 
Inferior fijo r izquierdo anidado 
Izquierdo fijo 

Izquierdo fijo r inferior anidado 
Izquierdo fijo r superior anidado 
Superior anidado 
Superior fijo r derecho anidado 
Superior fijo r inferior fijo 
Superior fijo r izquierdo anidado 



El programa mostrara todos los disenos 
predeterminados de marcos para tu web. 




Conjunto de marcos con un marco de tamano fijo en la 
parte izquierda y un marco anidado en la parte 
inferior. 



Tipo de documento: XKT1V1L 1.0 Transitional 



Paso 4 

Cada marco debe tener un titulo con el cual el programa lo relaciona e independiza de los 
otros espacios, por ello, en la nueva ventana Atributos de accesibilidad de la etiqueta de 
marco, selecciona el bottom Frame y lo denominaras temas. 
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r 



Actividad de aplicacion: 



Repite el paso 4 con los otros dos marcos: 

• leftframe (titulo) 

• mainframe (contenido) 



Terminado lo anterior, haz die en Aceptar. 



j 



Paso 5 

Inserta el texto correspondiente al tema de efecto 
invernadero en cada una de los marcos. El de la izquierda 
recuerda que es el titulo, el de la derecha el contenido y el 
inferior de temas diversos (en esta parte colocaras otros 
temas relacionados al efecto invernadero). 



Puedes cambiar el ancho o alto de los macros al hacer die 
en las Imeas y arrastrar con el cursor hasta la medida 
deseada, para que tu texto se pueda ver con claridad. 




Los marcos te ayudan a tener rapidamente toda la informacion ordenada de manera uniforme, 
para que puedas tener varias paginas de tu web con una misma presentacion. En el caso de 
nuestro ejemplo, a la izquierda esta el titulo, a la derecha esta el contenido y abajo estan los 
temas relacionados. 



Actividad de apMcacion: 



Realiza otra pagina usando el mismo marco que 
utilizaste, pero esta vez sobre el cambio climatico. 



Ahora no te recomendamos utilizar este 
metodo para crear tu web, en su lugar 
construiras el esquema de las paginas 
mediante tablas, lo cual te explicaremos 
en el proximo capitulo. 
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dCUANTO APRENDI? 




Muy bien, ya has terminado con el estudio de este capitulo. Ahora te 
invito a que tu mismo evalues cuanto has aprendido. Para ello, desarrolla 
las actividades que te proponemos a continuacion. 



1. Senala la respuesta que corresponde al espacio en bianco: 



a. Cada marco debe tener un 



e independiza de los otros espacios. 
| | icono | | titulo 



con el cual el programa lo relaciona 
| | topframe 



b. Los son areas independientes que en su conjunto forman una web. 

| | mainframe | | marcos | | boletines 



c. Para verificar que mi sitio haya sido creado con exito, debo fijarme en (...) 

| | los Atributos de | | el panel J | la Barra 

accesibilidad de la Archivos aplicaciones 

etiqueta de marco 



de 



2. Explica brevemente los pasos a seguir para utilizar las plantillas del programa. 

3. Investiga sobre los juegos tradicionales de tu region y coloca la informacion en una de las 
plantillas que has revisado, de acuerdo a como se te ha ensenado en el curso. 

4. Investiga sobre los instrumentos musicales peruanos de origen prehispanicos y a traves de 
la herramienta Marcos coloca la informacion en la web. 



49 




PONTIFICIA 



UNIVERSIDAD 
CATOLICA 



DEL PERO 



Diseho de paginas web con Dreamweaver 



INTEGRANDO LO APRENDIDO 



Ahora avanzaras la segunda parte de tu proyecto integrador: 
elaboraras un blog. Para ello, te ayudara mucho lo trabajado en 
esta unidad. Sigue cada una de las indicaciones y aplica todo lo 
aprendido. 




Indicaciones generales para el proyecto (segunda parte) ^ 

• El trabajo lo realizaras de manera individual. 

• La tematica del blog debes presentarla en una hoja tamano A4 y sustentarla, es 
decir, explicar la importancia del tema elegido para tu blog, recuerda que debe 
estar relacionado con el tema que escogiste en tu boletm. Luego, haras un breve 
comentario sobre que te parecio trabajar con el programa y cual crees que es su 
potencial. 

• La presentacion del trabajo se hara al finalizar el curso, cuando tu profesor(a) lo 
indique. 

<LQue debo hacer para presentar mi proyecto? 

1) Busca en la web distintos tipos de blogs que contengan diversas tematicas, ello 
orientara la elaboracion y diseho del tuyo. Luego, responde a las siguientes preguntas: 
ipara que sirven los blogs?, icuales te han gustado mas y por que? 

2) Determina el tema que trabajaras en el blog y fundamenta el porque de tu eleccion. 
Los temas propuestos son: "Derechos humanos", "Cambio climatico" o "Aspectos que 
fundamentan la peruanidad: costumbres y tradiciones", escoge uno de ellos. Recuerda 
que debe estar relacionado con el tema de tu boletm. 

3) Determina las caracteristicas de color, fuente, numero de letra que debe tener tu blog. 

4) Presenta estos datos (punto 2 y 3) a tu profesor(a) en un documento en Word, en la 
fecha que te indique. 

5) Configura un nuevo sitio web para que guardes alii todo el avance que realices con el 
blog y no se confunda con el proyecto del curso. 

6) Sigue los pasos que te planteamos a lo largo del curso para que al final elabores tu 



blog. 
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CAPITULO 3 



TABLAS 



Observa la pagina web que te presentamos a 
continuacion. 





vaca misturizada 

Posted in videos vacunos on 12. sep. 2011 




Llegaste... 

Aquf donde solo hay ganas de contar cosas, ganas 
de pequenas historias, ganas de ponerle foto a un 
recuerdo, ganas de escribir sin presion, sin 
expectativa, solo ganas de escribir cuando tenga 
ganas... 

Visita mi establo 



ft 



Blog: Vaca descarriada 3 



1. iCual crees que es la base sobre la cual 
se ha construido el contenido? 

2. iComo crees que se hace? 



Respuesta: 




Bien, ahora te invitamos a que inicies con el 
estudio del capi'tulo y tu mismo, a partir de la 
ejercitacion y desarrollo de cada actividad, 
corroborestu respuesta. 



Imagen tomada de la pagina web de Wendy Ramos < http://vacadescarriada.lamula.pe/ > Fecha de 
consulta: 21 de septiembre de 2011. 
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3.1 CREAR TABLAS PARA DISENAR Y ADMINISTRAR ESPACIOS EN TU 
WEB 



Observa la siguiente web: 



GloBizz 



THE HELP YOU NEED 

when you need it most 



SRRB 

Mnin Menu 



GloBizz 




ram rag win mrrnmc 




Tabla 
principal 



Tabla de 
segundo nivel 



Tabla de 
tercer nivel 



Tabla de 
cuarto nivel 



Como has podido observar, para construir la web se ha requerido de muchas tablas de 
distintos niveles, las cuales definen la administracion de los espacios que tal vez, a primera 
vista, no te hubieras dado cuenta. 



Muy bien, ahora revisa la respuesta a la primera 
pregunta del capitulo. c Acertaste?, entonces, 
dcual estu primera conclusion? 



Las tablas son muy importantes dentro de una web, pues gracias a estas se 
disena su esquema y, ademas, ayudan a ordenar los elementos que 
contienen. 




Ya respondimos a la primera pregunta, pero nos falta resolver la 
segunda interrogante: c como crees que se hace?, es decir, c como 
se hace la tabla de nivel 1, nivel 2 o nivel 3? Ahora aprenderas, 
para ello, realiza la siguiente actividad. 
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Actividad 1: 

Elabora la tabla del blog de noticias escolares considerando 
las caracteristicas de la imagen que observas a continuacion. 



.■Documtntosntitulc ■ [ ♦ • • • A 


l«alKrt'C:/ltoWG*1)e^ * »||* Buscar con 6009k 























Sigue cada uno de los pasos que te presentamos a fin de que desarrolles esta actividad. 



Paso 1 

Revisa el esquema de la web y fijate cuantas tablas observas. 







Irtser 


tar | -si 


Paso 2 




Ox 


mun ▼ 


Abre Dreamweaver y crea un nuevo HTML. 




% 


Hpervincuk) 






E3 


Vinculo de correo eiectronico 


Paso 3 




& 


Andaje con nombre 






1 — 1 

:■■ ' 


Regia honzontal 


Dirigete a la barra Insertar y haz die en Tabla. 




m 


TaMa k 






m 


Insertar eo^Ueta Drv 


Paso 4 






' Imagenes : Imagen 



Emergera una ventana llamada Tabla, en donde estableceras los parametros basicos para su 
construccion. A continuacion, debes consignar los siguientes datos: 



• Filas: 2 

• Columnas: 1 

• Ancho de tabla: 800 pixeles 

• Grosor del borde: 5 pixeles 

• Relleno de celda: 0 

• Espacio entre celdas: 5 

• Encabezado: Ninguno 



Luego, da die en Aceptar 

/ 

Es recome 

indicamos 
pueda v 
cualquier \ 




Ancho de tabla: 800 [pfeetes 

Grosor dd borde: 5 

Refleno de celda: 0 

Espaoo entre celdas: 5 





1 n 

aquierda 


m 

Superior 


Arrfej 



Texto: | 



ndable escoger el ancho que te 
(800 pixeles) para que tu web 
'erse comodamente desde 
oantalla. 



> 
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Paso 5 

Obtendras una tabla con dos filas y una sola columna. La primera fila estara destinada para el 
menu de la web y la segunda fila para el contenido. 



Untitled-1" x I 



Cocfcgo I ^ Divj* | ^ Diseno | _£j Vista en vivo 



Tftuio: Documento sin b'tulo ^ > % ' 




Paso 6 

Para que la tabla se vea centrada en la pantalla, primero seleccionala, luego, dirigete al 
Inspector de propiedades y en Alinear, elige Centro. 



Propiedades M 






TaWa Has 


2 


An 800 p6c. ▼ j Rell. celda 


0 


Alinear [cenfr^^^^^ 


Cols 




Esp. celda 


5 


Borde 5 



Ahora ya sabes crear las tablas del contenido, pero si 
quieres crear una tabla dentro de otra, como se 
observa en la imagen y modificar el ancho y alto de 
celdas, <Lque debes hacer? 




Sigue los pasos que te presentamos a continuacion para realizar la 
actividad: 

a. Creando una tabla dentro de otra 
Paso A 

El menu de tu web tendra 6 partes, pero construiras una tabla con 
7 columnas porque dejaras una para el titulo de la web. Coloca el 
cursor en la celda superior y repite el paso 2 de la anterior seccion. 



^ l-kper vinculo 

r£} Vinculo de correo etectronico 

<£) Andaje con nombre 

a Reola horizontal 

" ™ la 

□J Insertar elflueta Drv 
SI " Imageries : Imagen 



Paso B 

El ancho de la nueva tabla debe ser igual al de 
la contenedora (800 pixeles). Realiza los 
siguientes cambios y le das die en Aceptar. 

De esta manera, tienes una tabla dentro de 
otra como se te muestra arriba. 



Tabla 



Tamano de tabla 



Ancho de tabla: 


800 


[Pixetes ▼] 


Grosor del borde: 


0 


Pixeles 




n 





Espaao entre celdas: 0 FH 
Encabezado 




22 



izquierda 



Superior 



Am bos 
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b. Modificando el ancho y alto de celdas 
Paso A 

Para modificar el ancho de la primera columna de la 
nueva tabla, debes hacer die en una celda 
(aparecera el cursor dentro de ella). 



Luego, debes ir al 
Inspector de propiedades 

para variar el ancho y 
presionas Enter. 



Propiedades 




<>ktml| 


Forma to 






Clase Nnguna ▼ B I :='= = = 


Ninguno 


H 


h CSS 


P 


Ninguna 




Vinculo ▼ 



O 3fc Ver|. I Predet. ^1 Al. 



&K.D 



El resultado es el 
siguiente: 



/ 

Al modificar de esta manera una celda, las restantes 

que se encuentran dentro de la misma fila se 

modificaran de manera porcentual: las otras seis 

celdas mantendran una medida comun entre ellas. 
\ 




Paso alternativo 
Paso A 

Tambien hay otra manera de realizar el paso anterior. Cuando haces die en una de las celdas, 
apareceran Imeas verdes encima de la fila con pequenos indicadores encima de cada celda: 




Da die en el indicador de encima de la celda que quieres editar, 
veras que emerge un pequeno menu con varias opciones que te 
seran utiles mas adelante. Por ahora, elige Seleccionar columna. 



r- , T , \ 


Seleccionar columna 




Borrar ancho de columna 


Insertar columna izquierda 




Insertar columna derecha 





Luego, haz los cambios 
respectivos en el Inspector de 
propiedades como en el paso 
anterior. 



Propiedades 

Ohtml] 


Forma to Ninguno ▼ 


Clase Mnguna - B I |= 5= *l tM 


CSS 


P Ninguna ▼ 


Vinculo ~ 




CeJda Horij. [ Predet. ^ 
□ if Vert. | Predet "\ 


An. 200^0 aj. Fondp 
Al. &K. □ 
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Paso B 

Para editar la altura de la tabla debes repetir el paso A, con la variacion de que completaras el 
siguiente campo vacio con la medida que deseas (en pixeles): 



Celda Horiz. | Predet ^] An. 200 N o aj. Fondo 
' O Sfc Vert. I Predet. ▼] Al. 50 Enc. □ 





800^ 

























1 




A partir de ahora, utilizaras seguido el Inspector 
de propiedades. Recuerda su ubicacion y funcion 
levendo el capitulo 1 del curso. 



Ten cuidado cuando 
modifiques el alto de una 
celda, pues modificaras la 
altura de toda la fila tambien. 

? 



Actividad de apiicacion: 

1. Modifica el resto de columnas para que tengan una altura fija de 50 pixeles 
tambien. 

2. En la segunda fila de la tabla principal, crea una nueva tabla con las siguientes 
caracteristicas: 

S Dos columnas y una fila 
S Ancho de tabla de 800 pixeles 
S Sin grosor ni relleno, tampoco espacio entre celdas 

^ JJ 

El resultado de la actividad de apiicacion deberia ser el siguiente (los bordes de colores han 
sido agregados solo para que se distinga el resultado): 



La segunda fila de la tabla principal sera para el contenido, 
por lo cual no modificaras su altura. Se ajustara 
automaticamente a la cantidad de elementos aue inereses. 



Finalmente, guarda el documento como inicio.html y tambien una copia con el nombre de 
esquema.html. 

Para verificartu avance en el navegador, presiona F12. 

Solo ves los bordes de la tabla principal porque a las tablas secundarias (o interiores) no les 
asignas ninguna cantidad de borde, por lo cual se vera unicamente el contenido. 
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Es una opcion que dependera del diseno que se le quiera dar a la web. 



Actividad de reflexion: 



Antes de continuar, responde la siguiente pregunta: <Lpor que crees que es 
importante o util el uso de tablas para el diseno de una web? 



3.2 INGRESAR Y EDITAR TEXTO EN UNA TAB LA 




^^^^ Muy bien, has aprendido a crear las tablas de la web, pero si 
observas, una web requiere contenido y mas si es un blog. Por 
ello, te invitamos a que desarrolles la siguiente actividad. 



TIC l AS At DiA 

ig de Koticias Escolares 



Actividad 2: 

Ingresa texto a la web que estas elaborando, 
siguiendo los pasos que te presentamos a 
continuacion. Para comenzar, debes ir al documento 
inicio.html. 



Muy buenos dias a tod@s!! 

En este blot compartiremos las ultimas novedades que ocurren en el dia a dia 
escoUr. Desde aqui public aremos todas las actrvidades del ario de todos los 
pados de nuestro coletio, asi como cumpleanos del alumnado. personal 
docente y adminht/atKo. 

La idea es que tod is pardcipemos compartiendo materiales: escritos. fotos. 
ideas. ti«t«)o-. mm. prefuntas, etc. Sereaios una fueol* dr intercambio de 

Nuestro crecimiento depende de ustedes. ya que el biof es de tod iv nosotros, 
asi que escnbenos con tus dudas. suferencias o materiales a: 
rtoticiiialo1afrmail.com. ;Te esperamos! 



Para realizar la actividad sigue los pasos que te presentamos a continuacion: 
Paso 1 

Da die en la celda donde ingresaras el texto, en la primera celda de la primera fila (la que mide 
200 pixeles de ancho). 



Paso 2 

Ingresa el siguiente texto: 



KOTICIAS AL DIA 
Blog de Koticias Escolares 



Para obtener menor espaciado, 
utiliza las teclas: Enter+Shift. 



V 



1 
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Paso 3 

Edita el texto tal y como lo hiciste en el capitulo 1, es decir, creando reglas CSS. 



Actividad de aplicacion: 

En esta actividad, recordaras lo aprendido en el capitulo 1: 

1. Crea una nueva regla CSS para ambos textos: 

S "Blog de Noticias Escolares" (subtitulol) 
S "Noticias al dia" (titulol) 

2. Para subtitulol: 

S Font: Palatino 
S Font style: italic 
S Font weight: bold 

3. Para titulol: 

S Font: Verdana 
S Font size: 14 



Obtendras el siguiente resultado: 



NOTICIAS AL DIA 

Blog de Noticias Escolares 



Actividad de aplicacion: 

Cambia el ancho a la primera columna de la segunda fila a 350 pixeles. 



Paso 4 

Luego de editar la cabecera, ahora debes ingresar texto a la parte del contenido. Haz die en la 
segunda celda de la segunda fila. 



WOTICIAS AL DIA 

p log de No ticia s Es co lares \ 












i 1 



Paso 5 

Ingresa el siguiente texto: 



Observa como la celda se 
acomoda (en altura) a la cantidad 
de informacion que ingresas. 



jVhiy buenos dias a todgs! ! 

En este blog comparttremos las ultimas novedades que ocurren en el dia a 
5dia escolar. Desde aqui publicaremos todas las actividades del ano de 
Jodos los grados de nuestro colegio : asi como cumpleanos del ahnnnado : 
personal docente y adrninistratH r o. 

=La idea es que todgs participemos compartiendo materiales: escritos : 
£otos : ideas, trabajos : musica, preguntas : etc. Seremos una fiiente de 
intercambio de informacion. 

Kuestro crecimiento depende de ustedes : ya que el blog es de todgs 
jiosotros : asi que escribenos con tus dudas : sugerencias o materiales a: 
iioticiasaldia ggmail.com. jTe esperamo s! 



cuerpo 



Actividad de aplicacion: 

Ahora crearas tu propio texto, para ello, agrega un parrafo al texto, de tal 
manera que complemente la informacion que has ingresado anteriormente. 
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Paso 6 

Edita ahora el contenido del "cuerpo" para lo cual crearas una regla con las siguientes 
caracteristicas: 

1. El saludo cambialo a Encabezado 2. 

2. Para el "cuerpo", creas una regla CSS con el mismo nombre: 

S Font: Trebuchet MS 
S Font size: 12 
S Text align: justify 

Luego, aplica la regla al texto escogido. Para ello, selecciona el texto y en Inspector de 
propiedades, dirigete a la opcion Clase y escoge la regla correspondiente. 



<bodv> <table.tabla> <tr> <td>(<p>] 


PropFedades 


1 






Formate [parrafc T ] 


i 1 


fc CSS 


ID Ninguna ▼ 


. inclJID T @£ 



El resultado debe de ser el siguiente: 




Muy buenos dias a tod@s!! 

En este blot* compartiremos las ultimas novedades que ocurren en el di'a a die 
5scolar. Desde aqui publicaremos todas las actividades del ano de todos los 
jrados de nuestro colem'o, asi como cumpleanos del alumnado, persona 
Jdocente y administrative. 

:_a idea es que todd's participemos compartiendo materiales: escritos, fotos : 
Ideas, trabajos, musica, preguntas, etc. Seremos una fuente de intercambio de 
: nformacidn. 

I^uestro crecimiento depende de ustedes, ya que el blog es de todd's nosotros : 
iasi que escnbenos con tus dudas, sugerencias o materiales a: 
|no ticiasaldiadjgmail.com. iTe esperamos! 



Paso 7 

Antes de ver tu avance en el navegador, no te olvides de colocar el nombre a la pagina. 
Dirigete al espacio de tftulo (ubicado en la barra Documento) y denommalo: Noticias al dfa - 
Inicio: 



Tftulo: NOnCIAS AL DIA - Inicio 



Paso 8 

Presiona F12, selecciona 
Guardar y observa tus avances 
en el navegador. De esta 
manera, obtendras el siguiente 
resultado. 





<" ■» _ fte///C/lh«Ve-iimoi/D*sMop/pioytrto_*M!T>w*#»«t inioo.heml ft Dkekmerie Ml P # 
Compartit en f Keboo* 13 Oixusswn insHntanM D Marc»do,e! 
Gougle * .'IBuk..- / > • Accede, • 




NOTICIAS Al DIA 

Blog de Koticias Etcolarts 




Muy buenos dias a tod@s!! 



Actividad de investigacion: 

Antes de continuar, responde la siguiente pregunta: <Lde que otra manera 
podemos insertar texto dentro de una web? 
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Ahora nuestro blog de noticias escolares ya tiene un texto 
muy interesante y tu ya has aprendido a hacerlo. 

Revisa la respuesta a la segunda pregunta del capitulo. 
dAcertaste?, entonces, <Lcual estu segunda conclusion? 



3.3 EDITAR LAS PROPIEDADES DE LA TAB LA 



Hasta el momento, has aprendido a editar las 
caracteristicas mas importantes de una tabla, pero existen 
algunas funcionalidades que requieres aprender, pues las 
puedes utilizar en algun momento. 



a. Agregar o eliminar filas y columnas 




Actividad 4: 

Observa bien el texto que has ingresado en la web, esta muy pegado al 
borde. Para corregir esto, agrega una columna de ancho diminuto que 
servira de margen y sigue los pasos que te presentamos a continuacion: 



Para agregar o eliminar columnas, das 
die derecho a la celda de referencia y 
en las opciones te diriges a Tabla. En el 
nuevo menu desplegable, encontraras 
mas opciones incluyendo las 
relacionadas a insertar/eliminar filas o 
columnas: 



Formato de parrafo 



Estilo 



InContext Editing 

Vista de elementos 

Navegador de codigo... 
Editar etiqueta <td>... 
Insertar HTML... 
Crear vinculo 

Abrir pagina vinculada 



Seleccionar tabla 



Dividir celda... 



Insertar fila 
Insertar columna 
Insertar filas o col 

Eliminar fila 
Eliminar columna 



Ctrl + Alt+M 
Ctrl+Art+S 



Ctrl+M 
Ctrl+ Mayiis+A 



Ctrl+Mayus-H 
Ctrl+Mayus-i 



Aumentar tamano defila 
Aumentar tamano de columr 
Reducir tamano defila 
Reducir tamano de columna 

Anchos de tabla 

Modo detablas expandidas 



Ctrl+Mayus+n 



r 



Tambien existe un metodo mas sencillo y didactico, en el cual puedes decidir a que lado 
(derecho o izquierdo) agregaras la columna (no valido para filas). 

A continuacion sigue cada uno de los pasos a fin de realizar la actividad: 



Paso 1 

Luego de entrar al menu despegable de Tabla, selecciona el 
indicador verde de la primera columna de la primera fila. 
Recuerda la seccion "Modificando el ancho y alto de una celda". 



iOTICIAS AL DIA 

Hog de Noticias Escolares 
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Paso 2 

Se abre un pequeno menu del cual selecciona la opcion mas 
conveniente, en este caso escoge Insertar columna izquierda: 



Luego, aparece la columna creada como 
observas en la imagen. 



Seleccionar columna 
Borrar ancho de columna 

Insertar columna derecha l/tf 



aw* 1 


zoo- - 




NOTICIAS AL t 

Blog de Noticias 



Paso 3: 

En este caso, deberias obtener una columna de ancho diminuto, pero no 
siempre ocurre ello. No es problema porque ya sabes como cambiar el ancho 
de una celda. Ahora cambias el ancho de la nueva columna a 5 pixeles. 



Paso 4: 

Para ver con claridad el cambio, aprietas F12 y 
guardas. Podras ver claramente que hay un espacio 
"en bianco" entre la Imea de la tabla y tu texto: 

b. Unirceldas 




NOTICIAS AL DIA 

Blog de Noticias Escolares 



Otra herramienta que ya conoces por su uso en Word y Excel es la que permite la union de una 
o mas celdas. 



Selecciona las celdas y haz die derecho. 
Dirigete a la opcion Tabla y alii puedes 
escoger las opciones de Combinar celdas o, 
caso contrario, de Dividir celdas. 



c. Color de fondo de la tabla 



Tabla 

Formato de parrafo 

Lista 

Alinear 

Fucnte 

Estilo 

Fctilnt f<& 



Seleccionar tabla 


Combinar celdas 


Ctrl+Alt+M 


Dividir celda... 


S Ctrl+Art+S 


Insertar fila 


Ctrl*M 


Insertar columna 


Ctrl+Mayus+A 


Insertar filas o columnas... 






Hasta ahora tu tabla es transparente y no lo has notado 
porque el fondo del documento es bianco, pero cuando 
cambies su color o quieras colocar una imagen de fondo 
(como te ensenaremos mas adelante), tendras problemas. 



Actividad 5: 

Asigna color a la tabla, en este caso le pondras como color de 
fondo el bianco, #FFF, como se muestra en la imagen. 









NOTICIAS AL DIA 

Blog de Noticias Escolares 




Muy buenos dias a tod@s<! 
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Para que realices la actividad sigue los siguientes pasos. 



Paso 1 

Haz die en cualquier parte fuera de la 
tabla. Inmediatamente, dirigete al 
Inspector de propiedades y crea una 
nueva regla CSS (de acuerdo a como has 
aprendido) a la que la denominaras tabla. 



Paso 2 

En la nueva ventana, dentro de la 
categoria Fondo, haz die en la opcion 
Background-color y escoge el color de 
fondo para la tabla, que en este caso 
es el bianco, y das die en Aceptar. 



Nueva regla CSS 



Tipo de selector 

Boa un boo de selector contextual para la regla CSS. 

Oase (puede ser apfccablc a cualouter clcmcnto H i Ml ▼ 




Nombre del selector 

Boa a 



ara el selector. 



Este nombre de selector apkara la regla a 
todos los Hementos HTML con dase "tabla". 



Categon'a 



Bloque 

Cuadro 

Borde 

Lista 

Posjoon 

Extensiones 



Background -color: [Q] *f=FF 

4^ 



Background -repeat: | 
Background -attachment: 
Background -position (X): 
Background -position (Y): 



Paso 3 

Luego, selecciona toda la tabla (de acuerdo a como has aprendido), dirigete al Inspector de 
propiedades y, en la opcion Clase, elige tabla: 



Tabla 



Filas 2 



An 800 p&. 



Cols 1 



▼ I Rd. celda 0 
Esp. celda 5 



Almear Centro 
Borde 2 



jciasi 



e tabla 



L 



Paso 4 



Probablemente el programa haya asociado, 
automaticamente, la regla que creaste a tu tabla, pero 
debes asegurarte de esta manera. 



Finalmente, obtendras el siguiente resultado: las tablas tienen el fondo color bianco. En la 
imagen que te presentamos a continuacion, hemos cambiado el color externo de la tabla a 
rojo, para que puedas observar mejor el color bianco aplicado a esta. En tu trabajo original, el 
color externo sera bianco. Mas adelante te ensenaremos a cambiar el color exterior de la 
misma. 




AL DIA 

<g de Noticias Escolar 



Muy buenos dfas a tod@s!! 




Actividad de investigacion: 

dTe has preguntado cual es la mejor combinacion de colores posible si utilizas 
azul, verde o rojo? Busca acerca de la teoria de los colores para elegir las 
meiores combinaciones de colores oara el bloa. 
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dCUANTO APRENDI? 




Muy bien, ya has terminado con el estudio de este capitulo, 
ahora te invito a que tu mismo evalues cuanto has 
aprendido. Para ello, desarrolla las actividades que te 
proponemos a continuacion. 



1. Investiga lo siguiente: 

a. iSe puede anadir y editar el contenido de un texto elaborado de cualquier aplicacion 
como Word, Excel, Bloc de Notas, etcetera a una tabla de texto? Si la respuesta es 
afirmativa, <Lc6mo se hace? 

b. <iPor que crees que Dreamweaver solo utiliza algunas fuentes (fonts) y no todas las 
disponibles como en el caso de Word? <LPor que no se puede elegir solo una opcion, 
sino una Imea de opciones? 

2. Realiza la siguiente actividad: 

a. Realiza un breve ensayo sobre la diversidad linguistica en el pais. 

b. En base a lo aprendido en el capitulo, crea unas tablas e ingresa el texto del ensayo. Al 
finalizar, deberas explicar las propiedades de tabla y de la regla CSS que elegiste para 
el mismo. A continuacion, te mostramos un ejemplo. 



Introduction 



"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit 
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis 
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam 
nihil molestiae consequatur, vel ilium qui dolorem eum fugiat quo voluptas nulla 
pariatur?" 

Las zonas 

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est 
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam 
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id 



"Lorem ipsum dolor 
sit amet, consectetur 
adipisicing elit, sed 
do eiusmod tempor 
incididunt ut labore 
et dolore magna 
aliqua. Ut enim ad 
minim veniam, quis 
nostrud exercitation 
ullamco laboris nisi 
ut aliquip ex ea 
commodo consequat. 
Duis aute irure dolor 
in reprehenderit in 
voluptate velit esse 
cillum dolore eu 
fugiat nulla pariatur. 
cepteur sint 
aecat cupidatat 
i proident, sunt in 
ulpa qui officia 
serunt mollit 
st laborui 



65 



PONTIFICIA 

UNIVERSIDAD „ , . . . _ 

catolica Diseno de paginas web con Dreamweaver 

DEL PERU 



3. Observa la siguiente imagen e indica cuales son los pasos, de acuerdo a lo aprendido en 
este capitulo, para obtener este producto. No te olvides mencionar todas las reglas 
aplicadas. Luego, elabora dicho horario. 



MI HORARIO 




1 


hmes 






jueves 


viemes 








BBI 






colegio 




colegio 










































estudiar 








estudiar 






















Ahora el horario de closes se ha alargado una hora, para que podamos hacer las f areas en el colegio 
mas tiempo fibre. Creo que este ano sera genial!! 


y en la casa tengamos 



INTEGRANDO LO APRENDIDO 



En el capitulo anterior, has configurado el sitio web de tu 
blog, ahora elaboraras el esquema de tu web aplicando 
todo lo aprendido en este capitulo: construccion de tablas, 
ingreso y edicion de textos, entre otros. 




<LQue debo hacer para presentar la tercera parte de mi proyecto? 

1) Dibuja el esquema que quisieras para tu blog, teniendo en cuenta que sera construido a 
base de tablas. 

2) El esquema dibujado llevalo a la practica creandolo en Dreamweaver. Si encuentras 
dificultades, entonces prueba con un modelo menos complicado o utiliza el que hemos 
desarrollado en el capitulo. 

3) Cuando lo tengas listo, guarda el documento como esquema.html porque sera el punto de 
comienzo para que desarrolles todas las paginas para tu blog. 
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CAPITULO 4 



APRENDIENDO A INSERTAR MULTIMEDIA 



Observa las siguientes paginas e indica que tipo de 
recursos digitales son los que se encuentran en la 
parte central de la pagina. 




f 



Seguro has escuchado o visitado la feria gastronomica Mistura, 
las paginas web que has observado son del evento. 
Efectivamente, en la figura 1 vemos una imagen y en la figura 2 
un video. En este capitulo, aprenderas a insertar recursos 
multimedia a una web utilizando Dreamweaver. 



Feria gastronomica Mistura < http://www.mistura.pe/ >. Fecha de consulta: 22 de septiembre de 2011. 
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4.1 FOTOS E IMAGENES 

El insertar imagenes con Dreamweaver no es tan sencillo como hacerlo en otros programas, 
existen pasos que debes considerar antes de subir una foto a tu web. Antes de aprender a 
utilizar las herramientas que te ofrece el programa, debes tener en cuenta los siguientes 
puntos a fin de que puedas hacerlo sin dificultad. 

a. Preparando las imagenes 

Es recomendable que para desarrollar este punto tengas conocimiento basico de Photoshop u 
otro programa de edicion de imagenes, pues en este curso no se mencionaran los pasos para 
modificarlas. 



Puedes usar tambien, editores en Imea para modificar 
tus fotos como: Picnik, Photoshop Express, Pixlr, 
Phoenix, etcetera. 



t 



Estos son los principals aspectos a considerar antes de subir una imagen a tu web: 



Formato RGB 

Hay dos formatos de colores para imagenes: el RGB y el CMYK. 



RGB: usado para visualizar imagenes en medios electronicos, ya sean 
pantallas de pc, celulares, pods, television, etcetera. 
CMYK: usado en imagenes que seran impresas. Si una foto esta destinada 
a convertirse en parte de un banner, documento, afiche, etcetera, 
entonces debe estar en este formato. 



Cada formato tiene un uso especifico, las imagenes que vas a trabajar estaran en formato RGB. 
Por cada imagen que pretendas subir a tu web, te sugerimos revisar sus propiedades en 
Photoshop para modificar el formato si es necesario. 

^ 



Actividad 1: 

Investiga el significado de las siglas RGB y CMYK. 



Peso y tamano de la imagen 

Respecto al peso, no debes subir una imagen pesada a tu web porque sera dificil cargarla en 
las computadoras de los usuarios. Mientras mas pesa una imagen, mas sera el tiempo de 
espera. Por ello, debes prestar mucha atencion para verificar el peso de tu imagen: 
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Imagen grande: no mas de 320 KB 
Imagen mediana: 150 KB aprox. 
Imagen pequena: 35 KB aprox. 



Para web, la resolucion 
recomendada es la de 72 pfxeles 
por pulgada. 



En cuanto al tamano, para insertar imagenes en tu web debes tener en cuenta el espacio en 
donde seran insertadas. De acuerdo a este aspecto, debes modificarlas en el editor escogido 
para que encajen exactas. 



b. Insertando las imagenes 



r 



Actividad 2: 

Inserta una imagen dentro de 
una tabla, como se muestra en 
la figura. 




A continuacion, te guiaremos a fin de que realices la actividad: 
Paso 1 

Crea un nuevo documento HTML con el nombre de entrada.html. 



Paso 2 

Inserta una tabla de 800 pfxeles de ancho, con 1 fila y 1 columna. 
Paso 3 

Selecciona la unica celda y dirigete al panel Insertar, donde 
elegiras Imagenes: Imagen. 



Comun ▼ 

W Tabla 

[HI Insertar etiqueta Div 
[J!] t Imagenes : Imagen 



□ 



Marcador de posicion de imagen 
Imagen de sustitucion 
1^ HTML de Fireworks 



Paso 4 

Emergera una nueva ventana que por defecto 
te mostrara la carpeta del proyecto. Ingresa a 
Imagenes (se abrira la carpeta del proyecto, si 
no es asi, debes buscarla por tu cuenta) y 
selecciona la imagen que colocaras como 
bienvenida. 



Seleccionar origi 



Seleccionar nombre de archivo desde: » Sistema de archivos 



; I Fuentes de datos [ Sitiosy servidotes... 



fondo.jpg 



t 




pagejpg 


Aceptar 


1 




[ Archivos de imagen f .gif;*.jpg;*jpeg;*.png;*. ▼ 


| Cancel 


1 



URL: imagenes/page.jpg 
Relative a: [ Documento ▼ ] entrada.html 
d. en la definicion del sitio. 



[7] Vista previa de imagen 



Vista previa de imagen 




800 x GOO JPEG, 41K/1 s 
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Paso 5 

Luego, emerge una nueva ventana 
titulada Atributos de accesibilidad de la 
etiqueta de imagen. No es necesario que 
completes los espacios en bianco, 
simplemente le das die en Aceptar. 



Paso 6 

De esta manera, obtienes tu imagen dentro 
de la tabla. El ancho de la imagen tiene que 
ser el mismo o un poco menor que el de tu 
tabla. En este caso, lo unico que vario fue el 
alto, pues la imagen ya estaba preparada. 



Atributos de accesibilidad de la etiqueta de imagen 








Texto alternativo: ▼ 




Descripaon larga: http:// |^ 


Lanceiar "\j 


Si no desea mtroduor esta information al inser tar objetos, cambie 
las prefer enoas de Accesibilidad. 


( Ayuda | 




Inicio 
Data 
Videos 
Music a 
Nosotros 



Paso 7 

Centra la tabla y presiona F12, guarda y revisa el resultado en el navegador. 



c. Imageries de sustitucion 




Ahora aprenderas un efecto basico: tener dos imagenes que se cambien 
automaticamente al pasar el cursor del mouse por encima. Esto sirve para 
aumentar el impacto visual de tu blog y se vea mas profesional. 



Actividad 3: 

Realiza el efecto de la doble imagen. Lo realizaras en el blog 
Noticias al dia que elaboraste en el capitulo 3. 
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Sigue los pasos que te presentamos a continuacion para que desarrolles la actividad. 



Paso 1 

Abre el documento inicio.html. 
Paso 2 

Coloca el cursor en la celda ubicada en la primera 
columna de la segunda fila. 



flOTICIAS AL DIA 

-Blog de Noticias Escolares 



Muy buei 

in este blog corr 
Sescolar. Desde a 
grados de nues 
iJocente y admini 

La idea es que 1 
Jdeas, trabajos, rr 
jnformacion. 

^luestro crecimii 
jiosotros, asi qu 
Snoticiasaldia |em L = 



Paso 3 

Dirigete a la barra Insertar e ingresa al menu de 
opciones para insertar imageries. 



Paso 4 

Selecciona la opcion Imagen de sustitucion. 



fgl TaWa 

d^) Insertar ebqueta Div 
IjS ^^^ nagenes : Imagen 

Media 
[§] Fecha 



I |£] » Imagenes : Imagen 



51 Imagen 

Marcador de posicion de imagen 

11 



f£j HTML de Fireworks 
Barra de navegacion 



T~l Dibujar zona interactive rectangular 
T3 Dibujar zona interactiva oval 

Dibujar zona interactiva poligonal 



Paso 5 

Se abrira una ventana donde debes 
escoger las dos imagenes 
involucradas (buscalas en la carpeta 
fotos), despues da die en Aceptar. 



Insertar imagen de sustitucion 



Nombre de la imagen: Image 1 



Imagen original : imagenes/unojpg 



[ Exammar... ] 



Imagen de sustitucion: imagenes/dos.jpg 

0 Carga previa de imagen de sustitudon 



Texto alternativo: 
Al hacerse die, ir a URL: 



Ayuda I 



Puedes denominar a la 
imagen con cualquier 
nombre. 



Paso 6 

En la ventana Documento solo se vera la primera imagen. Para corroborar que el efecto este 
bien programado, aprieta F12, graba y verifica en el navegador. 
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d. Imagen de fondo 

Para utilizar una imagen de fondo en tu web, debes considerar la estetica y evitar saturar de 
colores la pagina, aunque ello finalmente depende de la tematica de esta. 



NOIICIASAL DiA 

| Bios * NotUm ttcoUm Y 


II 


Muy buenos dfas a todQs!! j 



Actividad 4: 
Inserta una imagen de fondo en el blog de 
noticias escolares que elaboraste en el 
capitulo 3. Utilizaremos una imagen editada 
especialmente para que encaje en el 
esquema de la web, una imagen sencilla que 
no quitara protagonismo a su contenido. 



m 



Los pasos que te presentamos a continuacion te ayudaran a desarrollar la actividad 4. 
Paso 1 

Continua trabajando con el documento inicio.html. Haz die en cualquier espacio fuera de la 
tabla. 



Paso 2 

Dirigete al Inspector de 
propiedades y en las 
opciones CSS, dale die a 
Propiedades de la pagina. 



Propiedades 








<> HTML 


Regla de desbno <Nueva regla CSS> * 


Fuente Fuente predetermmada 




I b css | 


Editor regla Panel CSS 


Tamano ETBBffll ▼ ▼ 


)E31= 






Proptedades de la pagina... rv 

14 





Paso 3 

En la categoria Apariencia, 
dirigete a Imagen de fondo y 

busca la imagen correspondiente. 
En la opcion Repetir, escoge 
Repeat. 



Propiedades de la pagina 



Categoria 



Apariencia (HTML) 
Vfnculos (CSS) 
Encabezados (CSS) 
Trtulo/Codificacion 
Imagen de rastreo 



Apariencia (CSS) 



Fuente de pagina: Fuente predeterminada 
Tamano: ▼ px 



Color del texto: Q 
Color de fondo: [~J 



Imagen de fondol imagenes/fondo.jpg 



| Examinar.. 



Repetir: H igfl 



No repeat: 

Para que la imagen no se repita, si es que la pantalla o 
el contenido de la web es mas grande verticalmente. 
Repeat: 

Cuando escoges una pequena imagen de fondo y 
deseas que llene toda la pantalla de forma repetida. 



Margen izquierdo: 
Margen superior: 



Margen derecho: 
Margen inferior: 



Ayuda 
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Paso 4 

Observa como la imagen de fondo ha 
sido insertada. 




Luego, dirigete al Inspector 
de propiedades, CSS, donde 
se ha creado una regla 
llamada body, seleccionala y 
dale die a Editar regla. 







<> HTML Regla de destino body 


Fuente Fuente predeterminada ▼ B / I 


| ftbCSS | | Editar regla ! Panel CSS 


Tamano Z3H) ▼ [_ - |~J 


^ [ Propiedades de la pagna... | 



Paso 5 

En la nueva ventana, busca la 
categoria Fondo y completa las 
siguientes opciones. Al final le das 
die en Aceptar. Esto te servira para 
mantener el orden centrado en 
todas las resoluciones de pantalla. 



Categoria 



Bloque 

Cuadro 

Borde 

Lista 

Posiaon 

Extenaones 



Fondo 



Background -color: |T^| 



Background-image: imagenes/fondo.jpg 



Posicion horizontal 
Posicion vertical 




Paso 6 

Presiona F12 y guarda. Revisa el resultado final. 



v. 



Actividad de investigacion: 

En algunos casos, la imagen de fondo no es tan grande como se cree, en otros, la imagen 
es la union de varias figuras. En la web, explora la imagen de fondo de tus paginas 
favoritas. Para ver la imagen, haz die derecho sobre esta y presiona guardar o ver fondo, 
ello dependera del explorador que uses: Internet Explorer, Firefox o Chrome. 



4.2 VIDEOS O MUSICA DE LA WEB 



Colocar videos o musica en Dreamweaver demanda que tengamos nociones basicas de 
lenguaje html, de tal manera que, por lo menos, podamos reconocerlo. 



Actividad 5: 

Busca definiciones y ejemplos de lenguaje HTML. 
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a. Codigo embebido 

Los diversos reproductores de multimedia (videos, musica, etcetera) en Imea (You Tube, 
Vimeo, Google Video, Grooveshark, etcetera), permiten enlazar el contenido que ofrecen a 
nuestra propia web por medio del codigo embebido (embed code), que es codigo html cuya 
estructura posee ciertas directivas. 

A continuacion, te ofrecemos algunos ejemplos de codigo: 



mm 



1 . .•«E:«rc:.-.*SyT»jNM* I J> [0]; 



d.gtcElensntByla(ld) I 





Me gusta Q + Anadir a w Compartir U 


1206088 




H 


http ://youtu . be/zYwCmc BOXM w 


mostrar opciones 




I (3 Q [*n m ° strarm a s 

|~a Watch with your friends. 
Start a Google* Hangout 


Insertar Enviar enlace de video por correo electronico 








Selecciona las opciones que quieras y copia y pega el codigo de insercion que aparece arriba. 
Eiood.gooamb.araenf.nconde.asopcone.se.cc^. 



b. Como insertar un video en una web 

Observa la siguiente imagen y realiza la actividad planteada. 



NOTICIASAL DlA 

Blog de Xoticias Escolares 



Videos de la semana 



Tht Shim - A'ra- Stag 



The Shins - New Slang (OFFICIAL VIDEO) 




.1 




Actividad 6: 

Inserta un video en la web Noticias al 
dia. 




Ahora aprenderas a insertar un video en una web, para ello 
necesitas preparar la pagina e insertar el codigo de videos. 
Sigue cada uno de los pasos que desarrollamos a continuacion, 
los cuales te orientaran a hacerlo. 



b.l Preparando la pagina para videos 



Paso 1 

Crea un 



nuevo 



NOTICIAS AL DIA 

documento HTML al que ^ logdeNoticiasEscolares .. 
Ilamaras videos.html. 



Utiliza el esquema basico detallado en el capitulo 3. 
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Paso 2 

Ubica el cursor en la zona de contenido (la 
celda mas grande de todas), da medio 
espacio (Shift+Enter) e inserta el texto. 



NOTICIAS AL DIA 

Blog de Noticias Escolares 



Videos de la semana 



Paso 3 

Selecciona lo ingresado y para editar 
este texto no utilizaras reglas CSS, 
simplemente en Regla de destino 
selecciona la opcion Nuevo estilo de 
h'nea. 



Propiedades 
OKTML 
| CSS j 
I i — » — u r 



i 



egla de destino <Nuevo estilo en linea> T 



Editar regla 



Panel CSS 



Paso 4 

Vas a editar el texto en el Inspector de propiedades, 

usando las secciones HTML y CSS, segun sea 
necesario. Para ello, ten en cuenta las siguientes 
caracteristicas: 

• Lucida Console 

• Color: #F00 

• Encabezado 2 

• Sangria de texto (un espacio) 



OTICIAS AL DIA 

log de Noticias Escolares 



Videos de la semana 



NOTICIAS AL DIA 

Blog de Noticias Escolares \ 



Videos de la semana 



Paso 5 

Presiona Enter e inserta una tabla de: 

• 5 filas x 1 columna 

• ancho de 760 pixeles 

• centrado 

Paso 6 

En la primera y quinta fila, ingresa el siguiente texto. 



Paso 7 

Selecciona la 2^ y 4^ fila para medir su altura en 5 pixeles. 
Paso 8 

Crea las reglas CSS para los textos. 



NOTICIAS AL DIA 

Blog de Noticias Escolares 



Videos de la semana 

The Shins - New Slang 



TITULO 



Cancion que se encuentra en el disco "Oh : Inverted World" y se 

Gold teeth and a curse for this town were all in my mouth. 
Onh' : i don't know how they got out dear. 
Turn me back into the pet that i was when we met. 
J was happier then with no mind- set. 



como soundtrack de la pelicula Garden State. 



CUERPO 
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Actividad de aplicacion: 

En esta actividad, crearas las reglas tanto para el ti'tulo 
como para el texto del cuerpo. 

1. Regla CSS para el ti'tulo 

• Nombre: ".titulo2" (sin comillas), Palatino, Bold, 
Font size: 14, Italic, Underline, Text align: center. 

2. Regla CSS para el cuerpo 

• Nombre: ".cuerpo2", Trebuchet MS, Font 
size: 12, Text align: justify 



Si despues de crear la regla, el texto 
que seleccionaste no sufre ningun 
cambio, seleccionalo nuevamente y, 
en la seccion HTML, busca la opcion 
Clase y selecciona la regla indicada. 




b.2 Insertando el codigo de videos 

Ahora insertaras un video en tu web, para ello, sigue los 10 pasos que te presentamos a 
continuacion. En este caso, utilizaremos uno de Youtube como ejemplo. 

Paso 1 

Abre una pestana en cualquier navegador e ingresa esta URL: 
http://www.youtube.com/watch?v=zYwCmcBOXMw 



Paso 2 

Busca y haz die en la opcion 
Compartir donde apareceran 
nuevas opciones. 




Me gusta Q + Anadir a ▼ I Compartir I *• 



Enlace a este video: 



http://youtu . be/zYwCmc BOXM w 



mostrar opciones 



Paso 3 

Haz die en Insertar y podras ver el codigo embebido. 



Enviar enlace de video por correo electronico 



[ +■/ | mostrar mas 



Ve videos con tus amigos. 
Iniciar una quedada de Google* 



iframe width="760" height="545" sr 
/embed/ zYwCmcBOXMw" frameborder="0" 



="http://w 
allowfulla 



Selecciona las opciones que quieras y copia y 
El codigo cambiara en funcion de las opciones 



Paso 4 

Selecciona y copia el codigo HTML 
que esta en azul. Como puedes ver, 
puedes elegir entre diferentes 
tamanos del reproductor o 
personalizar el tamano. Recuerda 
elegir siempre un tamano adecuado, 
menor (en ancho y alto) a la tabla 
donde colocaras el video. 



Insertar Enviar enlace de video por correo electronico 



[ +1 | mostrar mas 



Ve videos con tus amigos. 
Iniciar una quedada de Google* 



iiframe width="760" height="545" ar 
'embed/ zYwCmcBOXMw" frameborder="0" 



:="http://w 
allowfulla 



□ 



Selecciona las opciones que quieras y copia y pega el codigo de insercion que aparece arriba. 
El codigo cambiara en funcion de las opciones seleccionadas. 

0 Mostrar sugerencias de videos cuando finalice la reproduccion del video 

□ Utilizar HTTPS [?] 

□ Activar el modo de mejora de la privacidad [?] 
D Utilizar codigo de insercion anterior [?] 



420 x 315 480 x 360 



Personalizado 
Ancho: 760 px 
Alto: 545 px 
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Paso 5 

Luego, regresa a Dreamweaver y haz die en la 3^ celda de la tabla para posicionar el cursor. 



The Shins - New SItmg 

11====== 

: jCancion que se encuentra en el disco Oh, Inverted World y se encuentra como soundtrack de la pelicula Garden State. 



Paso 6 

Ahora, selecciona la opcion de Dividir diseno. 



videos.html 






iy| Codigo 


— | Dividir 


_j| Diseno 









Paso 7 

La ventana Documento se 

dividira en dos: la parte 
inferior con el diseno de tu 
web y la parte superior con 
el codigo HTML. Observa 
como el cursor se posiciona 
sobre un determinado lugar 
en la ventana de codigo, 
que es exactamente el 
mismo lugar que aparece 
en la ventana de diseno. 



Codgo Dr.Tdir 

<> O O <£}On 



Codigo en vivo ! < Vista en vivo 

:I//C |AJsers/e-ramos/Desktoptoroyecto_dream 



Inspecooo* ifo Tftulo: Docjriento sir 



- "5" tnbsp: 



<tdXp cla33="cuerpc2">Cancion que at 
- pelicula Garden State. </p> 

<p claaa«"cuerpo2">Gold teeth and < 
Only, i don't know how they got c 
Turn me back into the pet that i 



i el disco Squot:Oh, Inverted Worldtquot : y ; 

n my mouth. <br /> 



OTICIAS AL DIA 

g de Noticias Escolares 




ThiShvv - ^m Slang.. , 



\ <") 100S > 1033 x 264 v SK/ls Unicode (UTF-8) 



Paso 8 

Dirigete hacia donde aparecio el cursor en la ventana de 
HTML, antes de &nbsp, y borra todo este codigo. 



Luego, pega el codigo copiado de Youtube. 





Borrar 
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Paso 9 

Regresa al modo Diseno y observa lo siguiente. 




El espacio plomo es el video, solo que no se 
puede visualizar en Dreamweaver. 




Paso 10 

Presiona F12, guarda y 
comprueba si se puede ver en el 
navegador. El resultado final 
deberia ser como se muestra en 
la imagen. 





Recuerda que trabajar con el codigo es muy 
delicado, por lo que no debes borrar ni 
agregar nada mas alia de lo especificado 
aqui porque podrias desconfigurar toda tu 
pagina. 



Actividad de aplicacion: 



Inserta dos videos mas: uno de History Channel en espanol sobre las guerras 
mundiales y otro de National Geographic sobre el cambio climatico, pero 
primero no te olvides de crear una nueva tabla con las mismas 
caracteristicas que la anterior. 

Sugerencia: coloca el cursor al final del texto "Videos de la semana" y dale 
Enter; a partir de alii creas la nueva tabla. 
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Complementos 

Para complementar nuestro trabajo, le daremos un nombre a la pagina y agregaremos una 
imagen de fondo. 



Paso 1 

Al observar la pestana del 
navegador dice Documento 
sin tftulo. Escribe el nombre 
de "Videos - Noticias al 
Di'a". 





i ^ : Ml file///C:/Users/e-ramos/De5ktop/proyecto_dreamweaver/videos.html 


|_J Compartir en Facebook B Discussion instantanee... 

Goc*le| .|S|Buscar-|^ 








NOTICIAS AL DIA 

Blog de Noticias Escalates 


Videos de la semana 

The Shins - New Slang 



Paso 2 

Aplica una imagen de 
fondo a la pagina y sigue 



los pasos del subpunto 
"Imagen de fondo" de 
este capitulo. 




NOTICIAS AL niA 

Blog de Noticias Escolare 



3>. 



Videos de la semana 



The Shmi - S'ew Slang 




c. Como insertar musica en una web 

Observa la siguiente imagen y realiza la actividad planteada. 



Nosotros amamos la musica! ! ! :) : por eflo queremos recomendarte lo que creemos : te gustari 




Arcade Fire 

Sprawl II (Mountains Beyond Mountains) 
The Killers 

Smile Like You Mean It 




Actividad 7: 

Inserta un archivo de musica en el blog. 





D 


Mintains Beyond Mountains} 


« 




Arcade Fire 




□ 


Smile Like You Mean It 

The Killers 


« 



Al igual que en el caso del video, para insertar un archivo de 
musica debes preparar la pagina para musica e insertar el 
codigo respective Sigue cada uno de los pasos que 
desarrollamos a continuacion, los cuales te orientaran a 
hacerlo. 
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c.l Preparando la paging para musica 
Paso 1 

Crea un nuevo documento HTML al que denominaras musica.html. Utiliza el esquema basico 
del capftulo 3 y el subpunto Preparando la pagina para video. 

Paso 2 

Coloca como titulo "Musica recomendada", edita el texto con el Inspector de propiedades, 

con las mismas caracteristicas de "Videos de la semana". 

Paso 3 

Agrega un espacio con Enter e 
inserta una tabla, con las 
siguientes caracteristicas: 

• 7 filas x 2 columnas 

• 700 pixeles de ancho 

• Alineado al centro 



Paso 4 

En la primera fila inserta una foto, pero si observas bien, 
hay dos celdas en vez de una. Para ello, selecciona las dos 
celdas de la primera fila y dirigete al Inspector de 
propiedades y alii escoge Combinar celdas. 



Propiedades 




[Ohtml] 


For ma to Ninguno ▼ 


fe CSS 


ID Ninguna ■* 




^ Horiz. Predet. T . 
2 t.fc Vert. Predet. 



Paso 5 

De esta manera ya tienes la celda 
lista, entonces, inserta la imagen 
"music.jpg", ubicada en la carpeta 
de fotos. 

Paso 6 

Une tambien la tercera fila 
(de acuerdo a como te 
hemos explicado en el paso 
4) y escribe el siguiente 
texto: Nosotros amamos la 
musical!! :), por ello queremos recomendarte lo que creemos, te gustara. 

Paso 7 

Lleva el cursor a la celda derecha 
de la quinta fila y, luego, a la de la 
septima fila, y escribe el siguiente 
texto: Arcade Fire, Sprawl II 
(Mountains Beyond Mountains) y 
The Killer Smile Like You Mean It, respectivamente. 
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Nosotros amamos la musica! ! ! :) : por dlo p^CTemos recomendarte lo (jue creemos, te gustara: 




jNosotros amamos la music a! ! I :) ; por db cjUCTemos recomradarte lo cjue creemos, te gustari 



Arcade Fire 

Sjpr awl II (\Iountains B eyond Mountains) 



Pie Killers 

Smile Like You Mean It 
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C.2 Insertando el codigo de musica 

Usaremos basicamente los mismos pasos que cuando insertamos un codigo de video, solo que 
esta vez, te ensenaremos a colocar musica de Grooveschark. 

Paso 1 

Ingresa a http://www.grooveshark.com y busca las siguientes canciones: 

• Arcade Fire, Sprawl II (Mountains Beyond Mountains) 

• The Killers, Smile Like You Mean It 



Paso 2 

Ahora elige el codigo 
embebido. Da die en cada uno 
de los cuadros rojos, de 
izquierda a derecha para que 
aparezca cada menu, es decir, 
primero haz die en el signo +, 
luego, en Compartir cancion y, 
finalmente, en Widget. 





@ Anadir a Mi Musica 
<Q> Agregar a... 



Compartir Cancion 



1 ♦ Comprar Cancion 


K 


Denuncia esta Cancion 








Spread Ycur 


Me 



13 Facebook 
13 Twitter 
i2 StumbleUpon 
T-3 Reddit 



□ Copiar URL 





Paso 3 

Copia el codigo embebido personalizando el 
tamano de acuerdo a tus necesidades. Haz die en 
Copiar al portapapeles. No te olvides de 
considerar el ancho y alto de la tabla que creaste. 



Compartir - Sprawl II (Mountains Beyond Mountains) de Area 
URL: http://grooveshark.com/&''Sprawl+li+mountains+Beyond+Mountain 



B Facebook 

l_j Twitter 

£j StumbleUpon 

Reddit 
@ Widget ► 



Ancho: Temas: 



Codigo integrado: Jj^^^^^^^^^^^p 



<object width="250" height="40"xparam 



Paso 4 

Regresa a Dreamweaver y 
realiza los mismos pasos (del 
5 al 8) que hiciste al insertar 
codigo de video, luego, 
arregla el tamano de la celda 
para que quede adecuadamente. El resultado sera el siguiente. 



N'osotros air 


amos la musica! ! ! :) : por eflo queremos recomendarte lo que creemos : te gustari 








^Arcade Fire 

Sprawl II (Mountains Beyond Mountains) 






B 


The Killers 

Smile Like You Mean It 
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Paso 5 

Presiona F12 y guarda. Verifica si el resultado es igual al que observas en la imagen. 




^ Actividad de aplicacion: 

1. Practica, agregando mas filas para poder insertar un par de 
canciones mas. 

2. Crea reglas para el contenido, con las mismas caracteristicas que la 
pagina de videos. 

3. Colocale un nombre a la pagina y no te olvides de ponerle el fondo 
de tu web. 

v / 



/ 

Con el codigo html, no solo puedes agregar 
videos y musica, sino tambien muchas otras 
cosas mas, como tu gadget de Facebook, tus 
tweets, entre otros. 

v 



PONTIFICIA 

UN I VERS I DAD 

CATOLICA 

DEL PERU 





82 



Diseho de paginas web con Dreamweaver 




PONTIFICIA 

UN I YE RSI DAD 
CATOLICA 

DEL PERU 



dCUANTO APRENDI? 




Muy bien, ya has terminado con el estudio del capi'tulo, 
ahora te invito a que tu mismo evalues cuanto has 
aprendido. Para ello, desarrolla las actividades que te 
proponemos a continuacion. 



1. Responde a las siguientes preguntas: 

a. iCual es la diferencia entre No repeat y Repeat en la insercion de imagenes? 

b. De acuerdo a lo aprendido en el curso, senala cuales son los principales aspectos a 
considerar antes de subir una imagen a tu web. 



2. iCuales son los pasos para insertar este video en una web? 



YOUOiJjH ] jarabe de palo para enredar 

Para Enredar -Jarabe de palo '^Y ahora q hacemos? 

cralejo 16 videos !» Suscribirse 




Camilo Melchor 



3. Investiga lo siguiente: 

a. Busca una imagen para tu blog, coloca como titulo "fondos" en el buscador de 
imagenes de Google y elige la que mas te guste. Luego, responde a las preguntas: <Les 
necesario que edites la imagen? Si es asi, <Lque programa usanas?, idonde colocarias 
la imagen como fondo de toda la web, de una sola tabla o como imagen de 
sustitucion? iCuales son los pasos para realizarlo? 

b. iQue otros elementos de html consideras que podrias colocar aparte de videos y 
musica? 



4. En una web, inserta videos y archivos de audio relacionados con los principales 
ecosistemas en el mundo, utilizando las herramientas aprendidas en este capitulo. 
Ademas, colocale un fondo creativo y otros elementos html, que creas necesarios. 
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INTEGRANDO LO APRENDIDO 



Hasta el momento, ya debes contar con tus paginas 
tablas correspondientes para seguir algunos esquemas. 
Como has aprendido a ingresar texto e imagenes en este 
capitulo, puedes comenzar a ingresar la informacion que 
quieras a tu blog. 

V / 



dQue debo hacer para presentar la cuarta parte de mi proyecto? 

1) El mi'nimo de paginas centrales (secciones de tu blog) que se pide para el proyecto es de 5 
paginas conectadas entre si, presenta los nombres de estas paginas las cuales deben 
guardar relacion con la tematica escogida. Recuerda que puedes elegir mas paginas, pero 
no te olvides de ordenar bien la informacion que presentaras en cada seccion. Aun no te 
preocupes por el menu de navegacion, que permitira que los usuarios de tu web puedan 
elegir entre todas las secciones, porque sera explicado por medio de hipervmculos en el 
capitulo 5. 

2) Ingresa a tu blog elementos multimedia relacionados a la tematica elegida, pueden ser 
otros aparte de los presentados en el capitulo. 

3) Trata de utilizar todas las herramientas que aprendes con el curso. Mientras mas 
practiques con ellas, mas rapido las dominaras. 
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Capitulo 5 



LOS HIPERVINCULOS 




Observa detenidamente la web del grupo musical Camila. 
Describela y explica a donde crees que nos llevarian los 
links que se encuentran en la parte superior derecha. 



DEJARTE DE AMAR 



RECENT NEWS 



avance del Video ... 



jjjfl Avance del video "De Mi" de Camila. jMan; 



s 




"@SAMOALLSTAR: Ademas de cantar, 
vendo helado los domingos! 
http://t.co/M6oWyRQ" — 

13 weeks 3 days ago 



Pagina web grupo Camila 



Efectivamente, un link nos informara sobre 
novedades recientes del grupo; otro, sobre las 
canciones, etcetera. 



A esos links los conocemos como hipervfnculos. En el capitulo 
anterior, elaboraste el diseno de tu web, ahora le crearas 
hipervfnculos para que sea mas interactiva. Pero te preguntaras 
"dcomo lo hago?", es muy sencillo, te invito a que revises el 

ranrh iln 



) 




1 



Imagen tomada de la pagina web del grupo musical Camila https://www.camila.tv/us/home . Fecha de 
consulta: 22 de septiembre de 2011. 
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5.1 HIPERVINCULOS 

Son conocidos tambien como "vmculos", "enlaces" o "links". Son usados en varios tipos de 
documentos electronicos: Excel, Word, Power Point, paginas web, etcetera. 



Sirven para: 

• Hacer referencia a un punto especifico 
diferente al que el usuario se encuentra, dentro 
de la misma web o hacia un enlace externo. 

• Ver el enlace de correo y enviarlo rapidamente. 





Para el caso que se te presenta en este manual, los hipervmculos tendran dos funciones: 

• Interna: enlazar las diferentes paginas que conforman tu web (menu). 

• Externa: hacer referencias a otras webs de donde has sacado informacion o estan 
relacionadas al tema. 



5.2 IMPORTANCIA DE LOS HIPERVINCULOS 

Los hipervmculos son importantes porque deciden, en parte, la "popularidad" de una web en 
los buscadores. 





Por ejemplo, Google o Yahoo tendran en cuenta la cantidad de 
enlaces que tenga tu pagina web. Mientras mas referencias 
existan, los buscadores te indexaran mas rapido y en un mejor 
ranking. Es como cuando redactas una monografia o informe, 
mientras mas bibliografia tengas, el profesor vera que has 
investigado y, por ende, tendras mejor calificacion. 



Actividad de investigacion: 

Busca el termino "hipervi'nculo" y otras palabras relacionadas al curso en los 
buscadores Google y Bing, usando las mismas palabras. <LNotas alguna 
diferencia en el orden de los resultados de ambas paginas? <LA que crees que 
se debe? Investiga en Internet. 
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5.3 TIPOS DE HIPERVINCULOS 



Basicamente haytres tipos: 



Enlaces a paginas web 
Enlaces para enviar correos electronicos 
I ^ | Enlaces a PDF o contenidos descargables 



Soon You Can Port Your Phone Number to Google 
Voice for $20 



□ 



5 hours ago by Charlie White 
Q7 



Google Voice users, this is big: You might already be able to port your 
own piione niAnber into the service. Google just unleashed a test 
program a few hours ago 

According to Google =d . this ability to port your own inbound phone 
number is currently in a test phase that's available to certain users 
(such as us — we were luc ky enough to be among the chosen few) 
According tc TechCrunch. 3oogle released a statement: 




'We're continually testing new features to enhance the user experience For a limited amount of time, we're 
making the Google Voice number porting process available to users We don't have any additional details to 
share at this time, but plan to offer this feature to all users in the near future/ 



. SONY VAIO VGN-CR220E PINK - Color Rosado 

• Procesador Intel Core 2 DUO, 2.1 GHZ 

. 200 GB DISCO DURO, 2 GB Memoria RAM 

• Windows Seven 

• Pantalla de 14" 

• Quemador de CD/DVD 

• Camara (1.3 Megapixel MOTION EYE) y microfono integrado. 

• Bluetooth 

iCosto? 300 dolares iCual es el problema? La baten'a dura 15 minutos. Es decir no esta 100?; 
operative Por eso el costo. Si deseas puedo comprar la baten'a nueva pero el costo en este 
caso sena de 400 dolares. Oferta valida para Peru. 



Si se animan, comunicarse al emai 



apeves@gmail.com 



28 - Joaquin Sabina Y Jarabe De Palo - La Flaca 
29 - Joaqui'n Sabina Y Juan Echanove - Y Nos Dieron Las Diez 
30 - Joaquin Sabina Y Los Chichos - Circulos Viciosos 
31 - Joaquin Sabina Y Los Secretos - Por El Tunel 
32 - Joaquin Sabina Y Malevaje - Mano A Mano 

33 - Joaqui'n Sabina Y Maria Dolores Pradera - Jugar Por Jugar 

34 - Joaquin Sabina Y Maria Jimenez - Con Dos Camas Vacias 

35 -Joaquin Sabina Y Miguel Rios - El Blues Del Autobus (Vivo) 

36 - Joaqui'n Sabina Y Pablo Milanes - Quien Me Ha Robado El Mes De Abril 
37 - Joaqui'n Sabina Y Pedro Guerra - Republica Feliz 
38 - Joaqui'n Sabina Y Rocio Durcal - Y Nos Dieron Las Diez 
39 - Joaquin Sabina Y Vainica Doble - Con Las Manos En La Masa 



m 



Descargar aqui 



Actividad de investigacion: 

<LExisten otros tipos de hipervinculos? Investiga en Internet y comparte los 
resultados con tus companeros. 
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5.4 INSERTAR HIPERVINCULO A UN TEXTO 




NOTICIAS AL DIA 

Blog de Notidas Escolares 



En el capitulo anterior, hiciste el diseno del blog de noticias 
escolares, ahora a la web le agregaras hipervmculos, a fin de 
hacerla mas interactiva. 




Actividad 1: 
Observa el blog de noticias escolares e identifica cuantos 
hipervmculos tiene. Luego, crea cada hipervmculo que has 
identificado. 



CINE 

Recomendaciones para poder pasar un buen fin de semana cinefilo. 
Compra tu canchita, relajate en tu butaca y disfruta!! 

La cartelera del cine de esta semana: 

The Green Hornet 
Twelve 

Animal Kingdom 

De dioses y hombres 

La danza 

Mas informacion en La Butaca http://www. tabutaca. net/ 



Lunes, 17 de enero de 2011 

VISIT/A PUCP 



La PUCP nos ha invitado este jueves, a participar de una visita a sus 
instalaciones, donde nos explicaran todas las carreras que tienen, asi 
como mostrarnos sus instalaciones: aulas, pabellones, bibliotecas, 
H canchas de deporte, facultades, cafeterias, etc. 

^ Subiremos un album con todas las fotos de la visita para que puedas 
dm conocer la PUCP tambien :). 



febrero marzo abril mayo junto 
julio agosto setiembre octubre noviembre diciembre 



Efectivamente, en el blog encontramos 14 hipervmculos entre internos y externos. Antes de 
empezar a trabajar, debes crear otro nuevo documento. 

Para realizar la segunda parte de la actividad, sigue cada uno de los pasos que presentamos a 
continuacion: 



a. Creando un nuevo documento 

Crea un nuevo documento HTML al que llamaras data_enero.html, que seguira el esquema 
elaborado en el capitulo 3. 



^iOTICIAS AL DIA 

filog de Noticias Escolares 














\ ; 



b. Definiendo el esquema para las siguientes paginas 

En base a data_enero.html, donde subiras las noticias, eventos o ideas que deseas compartir 
en tu web, se organizaran los demas meses. Para ordenar la informacion, la posicionaras en 
forma horizontal. 
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Paso 1 

Coloca el cursor en la segunda fila de la tabla principal, presiona Shift + Enter (para un 
interespaciado menor) y crea una tabla. 



r. 



Actividad de aplicacion: 

Ahora crea la tabla con las siguientes caracteristicas: 

1. Tabla: 

• 1 fila x 1 columna 

• 780 pixeles de ancho 

• Sin bordes ni espacio entre celdas 

• Alinear al centro 

2. Regla CSS para esta tabla a la que llamaras ".tablameses" 

• Background color (en la categoria fondo): #F90 

• Text align (en la categoria Bloque): center 

• Font: Lucida Console 

• Font size: 16 

• Font weight: bold 

• Font style: italic 

• Color: bianco 
. Selecciona la tabla y aplica la regla. 



Paso 2 

Ingresa como texto los meses del ano en dos filas y separados por guiones. 



j 



enero - febrero - marzo - abri 7 - mayo - jumo 
'ulio - aaosto - setiembre - octubre - noviembre - tficiembre 



Paso 3 

Presiona F12 y verifica 
los cambios. 



NOTICIAS AL DIA 

Blog de Noticias Escolares 



enero - febrero - marzo - abril - mayo - junio 
junio - agosto - setiembre -octubre - noviembre -diciembre 



Paso 4 

Con la opcion Guardar como graba 12 versiones de esta pagina, una con el nombre de cada 
mes: data_febrero.html, data_marzo.html, asi sucesivamente. 



Paso 5 

Recuerda ponerle titulo a cada uno de los 
documentos: "Data de enero, Noticias al TTtulo: 
Di'a", como observas en la imagen y asi 
consecutivamente. 



Data de enero - Noticias al Dia 
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c. Insertando hipervmculos internos en un texto 




Con los 12 documentos, comenzaras a crear los 
hipervmculos internos y externos. En este caso, crearas 
los hipervmculos internos, los cuales te permitiran ir de 
un lugar a otro dentro de la misma web. 











Actividad 2: 
Crea los hipervmculos internos del blog de noticias 
escolares, de acuerdo a lo que observas en la imagen. 
Esto servira para crear contenido y acceso a la 
informacion que hemos ordenado por meses. 


NOTICIASAL DIA 

Blog de Noticias Escolares 








II ene t - 5rero - marzo - abril - mayo - junto 1 
II junto - ago s to - setiembre -octubre - noviembre -dictembre | 





Paso 1 

Abre en Dreamweaver el documento data__enero.html. 
Paso 2 

Selecciona el texto "febrero" y dirigete al Inspector de propiedades. En la seccion HTML, haz 
die en el icono de carpeta de la opcion Vinculo. 



Propiedades 



fe CSS 







Clase 


Ninguno 


H 


Ninguna 




Vinculo 



Hnrir. IPrpHpt 



Luego, selecciona el documento 
data febrero.html. 



Paso 3 

Obtendras el siguiente 
resultado: 



S Seleccionar archivo 




Nn ai. 1 I Fnnrln rir 



Seleccionar nombre de archivo desde: o Sistema de archivos 



I Fuentes de datos [ Sitios y servidores... 



Look in: j, proyecto_dreamweaver 


- 0 & SS" 






Name 


Date modified 


Type 


Size 


fotos 
imagenes 
multimedia 
Templates 
*t_ data_enero.html 


26/08/2011 05:34 ... 
12/09/2011 04:08 a... 
26/08/2011 05:35 ... 
26/08/2011 05:44 ... 
12/09/2011 11:52 ... 


File folder 
File folder 
File folder 
File folder 
Firefox Document 


2KB 


! *. data febrero.html 


12 '09 2011 11:54 ... 


Firefcx Document 


2 KB 


*^ entrada.html 
¥ esquema.html 

< 1 


12/09/2011 03:31 a... 
12/09/2011 05:32 a... 


Firefox Document 
Firefox Document 


1 KB 
2KB 

1 > 



Rle name : dataj ebrero html 




( Aceptar 




Files of type : ( Todos los archivos C I 


~3 


| Cancel 



URL: data_febrero.html 

Relativaa: [ Documento ▼ | data_febrero.html 

Cambiar vinculo relativo en la definicion del sitio. 



febrerc 



- marzo - abril - mayo - junto 

bre -octubre - noviembre -diciembre 
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Paso 4 

Luego, regresa y selecciona el texto "febrero", para editar aspectos basicos. Dirigete al 
Inspector de propiedades y 
en la opcion Destino, escoge 
self (recomendado para 
vinculos internos). 




1 





Ota ' 


B I :E iE ±= ±= TTtulo 




Vinculo ddtaJebrero.hbnJ 




•1 



Ten en cuenta lo siguiente: 
_blank: 

Para que el enlace abra una nueva ventana del 

navegador. 

_self: 

Para que el enlace se abra en la misma pestana o 
ventana del navegador. 



Actividad de aplicacion: 

1. Crea los enlaces para los demas meses siguiendo los mismos pasos 
aprendidos hasta el momento. 

2. Tambien inserta enlaces a los demas meses de cada documento. 



Paso 5 



Luego de hacer la 
actividad anterior, 
regresa al documento 
data_enero y deberas 
tener lo siguiente: 



fyiOTICIAS AL DIA 

mlog de Noticias Escolares \ \ \ 












febrero marzo abril mayo junto 
julio aposto setiembre octubre noviembre diciembre 



Paso 6 

Para ediciones de formato y color para los 
vinculos, debes ir a Propiedades de la 
pagina (en el Inspector de propiedades). 



B I 



Titulo 
Destino 



ndo | ~ 



Propiedades de la pagina. 



Paso 7 

En la nueva ventana, dirigete a la seccion Vinculos (CSS) y realiza los cambios 
correspondientes. Te recomendamos no modificar ni la fuente ni el tamano porque estos 
cambios afectaran a todos los hipervmculos del documento, no solo de lo seleccionado. Edita 
la siguiente informacion: 
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color de vinculo: #00F 
vinculos visitados: #666 
estilo de subrayado: 
"siempre subrayar" 
estilo de fuente: 
"italica" 



Propiedades de la pagina 



Categon'a 



Apariencia (CSS) 
Aparienaa (HTML) 

Encabezados (CSS) 
Trtulo/Codificabon 
Imagen de rastreo 



Vinculos (CSS) 



Fuente de vinculo: (Igual que fuente de pagina) 
Tamano: ▼ px ▼ 



Color de vinculo: Rj £00F Vinculos de sustitubon: £J J 
Vinculos visitados: ||J #666 Vinculos activos: 



Estilo subrayado: | Siempre subrayar 



Ayuda 



Aplicar 



Actividad de aplicacion: 

Realiza las ediciones a todos los documentos creados por cada mes. 



Paso 8 

Guarda todo y comienza con la prueba. Abre el documento data_enero.html. Comprueba que 
funcionen todos los hipervmculos. Viaja de una pagina a otra; el titulo de la pagina en la 
pestana del navegador te confirmara que mes estas viendo sin ningun problema. No te olvides 
de realizar el paso 5) . 

d. Insertando hipervmculos externos en un texto 

Observa la siguiente imagen: 

viernes, 14 de enero de 201 J 

CINE 

Recomendaciones para poder pasar un buen fin de semana cinefilo. 
Compra tu canchita, relajate en tu butaca y disfruta!! 

La cartelera del cine de esta semana: 

The Green Hornet 
Twelve 

Animal Kingdom 
De dioses y hombres 
La danza 




Mas informacion en La B ut^^^^p^/fwwwJsbutaca.f^^^^ 



Actividad 3: 

Crea los hipervmculos externos del blog de noticias escolares, de acuerdo a 
como observas en la imagen. Generalmente, en todos los blogs, siempre hay 
referencias externas a otras paginas que contienen informacion relacionada y 
que ayudan a sus lectores a conseguir mas detalle de lo publicado. 



Sigue los pasos que te presentamos a fin de que realices la actividad 3. 
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Paso 1 

Abre nuevamente el documento data_enero.html. Coloca el cursor en el espacio vacio, encima 
de la tabla donde estan los meses. Crea una tabla con las siguientes caracteristicas: 

• 1 fila x 2 columnas 

• 780 pixeles 

• centrada 



Luego, selecciona la 
celda de la izquierda 
de la nueva tabla y le 
das el ancho de 300 pixeles. 



Paso 2 

Inserta una imagen en la primera celda de la nueva 
tabla. Selecciona la imagen y haz die en Aceptar. 




hi im • 

ttename Cnemapg | ActpUr | 



URL: im»9fnes/Cir»ma pg 




La imagen seleccionada se ubicara en la celda como 
observas a continuacion: 




febrero marzo 



lulio agosto settembre octui 



vierneS; 14 de enero de 201 1 
CINE 

^Lecomendaciones para poder pasar un buen fin de semana cinef 
canchita, relajate en tu butaca y disfhita! ! 

La cartelera del cine de esta semana: 

|The Green Hornet 
Tweh r e 

nal Kingdom 



Paso 3 

Luego, inserta el texto. 



Paso 4 

Crea las reglas CSS para la fecha, titulo y cuerpo de la entrada. Recuerda el ejercicio que 
realizaste en el capitulo 1. 
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v 



Actividad de aplicacion: 

1. Seleccionar la fecha y crea la regla ".fechas": 

• Font: Lucida Sans Unicode 

• Font weight: lighter 

• Font size: 12 

• Font style: italic 

• Text align: right 

2. Seleccionar el titulo y crea la regla llamada ".titulo2" 

• Font: Comic Sans MS 

• Font size: 18 

• Font weight: bold 

• Color: #F90 

• Text align: right 

3. Seleccionar el contenido de la entrada y crea la regla ".cuerpo" 

• Font: Verdana 

• Font size: 12 

• Text align: justify 



J 




Paso 6 

Si observas la web, te daras cuenta de que el texto esta pegado a la imagen. Para que separes 
el texto de la imagen que estan demasiado juntos y sobre la base de lo aprendido en el 
capitulo 3 ("Agregar o eliminar filas y columnas") , inserta una nueva columna entre el texto y 
la imagen a la que le daras 10 pixeles de ancho y presiona F12. Obtendras el siguiente 
resultado: 
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NOTICIAS AL DtA 

BJog de Noticias Escolares 



< de enero de 2011 

CINE 

Recomendaciones para poder pasar un buen fin de semana cinefilo. 
Compra tu canchita, relajate en tu butaca y disfruta!! 

La cartelera del cine de esta semana: 

The Green Hornet 
Twelve 

Animal Kingdom 

De dioses y hombres 

La danza 

Mas informacion en La Butaca http://www.labutaca.net/ 



febrero marzo abril mayo jumo 
ulio aqosto setiembre octubre noviembre diciemb 




Paso 7 

Ahora, para insertar el hipervi'nculo, selecciona el texto que quieras que tenga el enlace, en 
este caso es la siguiente direccion electronica: 



Mas informacion en La Butaca http://www.labutaca.net/ 



febrero marzo abril mayo junio 
ju/io aqosto setiembre octubre noviembre diciembre 



Paso 8 

Dingete al Inspector de propiedades y, en la seccion HTML, completa el espacio vacio de 
Vinculo con la direccion completa de la web a la cual vincularas tu pagina. 



Clase 


cuerpo ▼ B I 


■ — 


Vinculo 


http : //www , labutaca . net/ 





No olvides llenar la direccion 
completa incluyendo http://. 



Paso 9 

En la opcion Destino, selecciona "_blank" 



Ob 



TTtulo 






Destino 


_blank t 











Paso 10 

Ahora prueba tu enlace: presiona F12, guarda y haz die al hipervmculo en el navegador. Se 
deberia abrir una nueva ventana con la pagina deseada. 



Animal Kingdom 

De dioses y hombres 

La danza 

Mas informacion en La Butaca bttp://www. tebuta ca, net/ 



Actividad de investigacion: 

Busca en la web informacion sobre cual es mejor opcion para crear 
hipervmculos (_blank o _self) para el enlace de las paginas y cuales son las 
desventajas y ventajas de cada uno. 
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5.5 INSERTANDO HIPERVINCULO A UNA IMAGEN 



Ahora insertaras un hipervinculo a una imagen. El procedimiento V 
es similar al anterior por lo que no te sera complicado ^ 
comprenderlo, pero antes prepararas los elementos que te 
permitiran realizar la actividad. 




Lunes, 1 7 de enero de 201 1 



VISITA PVCP 



La PUCP nos ha invitado este jueves, a participar de una visita a sus 
instateciones, donde nos explicaran todas las cameras que tienen, asf 
comj mostrarnos sus instalaciones: aulas, pabellones, bibliotecas, 
canjnas de deporte, facultades, cafeterias, etc. 

firemos un album con todas las fotos de la visita para que puedas 
tambien :). 




Actividad 4: 
Crea un hipervinculo a la figura que se encuentra 
en el blog de noticias escolares, como observas en 
esta imagen. 



Para desarrollar la actividad sigue los siguientes pasos: 
a. Pasos previos 
Paso 1 

En el documento que has trabajado la insercion de hipervmculos internos y externos, crearas 
una nueva entrada, es decir, otra tabla. 



El cursor se mostrara como en la imagen. 



e enero de 20 

Clh E 

emana cinefi j. 
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Luego, presiona Shift + Enter. 



Mas infprmacjpn en La Butaca http://www.labutaca. net/ . 




febrero marzo abril mayo iunio 
Julio agosto setiembre octubre noviembre diciembre 



\ Mas informacipn en La Butaca. http://wwA?. Sabutaca.net/ 



Paso 2 

Ahora tienes 
una nueva f i la, 

en la cual puedes ingresar una nueva tabla con las caracteristicas de la anterior. 



: Mas .inform aci. on en La Butaca http://www.labutaca.net/ . 




Mas information en La Butaca nil 



Paso 3 

En la celda de la 
izquierda, inserta 
la imagen llamada 
"pucp" que esta 
dentro de la 
carpeta fotos. 

Paso 4 

Ingresa un texto y 
trabaja el contenido 
con los mismos estilos 
de la entrada anterior. 
Recuerda que solo 
debes seleccionar el 
texto, luego dirigete 
hacia el Inspector de 

propiedades (en la seccion HTML) y en las opciones de clase selecciona la regla que 
corresponde al texto elegido. 

Paso 5 

Antes de insertar el vinculo en la imagen, hazlo con el texto "PUCP". 




Lunes, 17 de enero de 201 1. 



VISITA PUCP : 



La PUCP nos ha invitado este jueves, a participar de una visita a sus 
instalaciones, donde nos explicaran todas las carreras que tienen, asi' como 
rnostrarnos sus instalaciones: aulas, pabellones, bibliotecas, canchas de: 
ftJeporte, facultades, cafeterias, etc. 

lubiremos un album con todas las fotos de la visita para que puedas 
:onocer la PUCP tambien :). 



^Activi 



Actividad de aplicacion: 



En esta actividad, vincularas la palabra PUCP que se encuentra en el 
texto con la pagina principal de esta universidad . Para ello, debes 
seguir los siguientes pasos y recordar lo aprendido en el subpunto 
anterior: 



1. Selecciona el texto que se titula "PUCP". 

2. Inserta el vinculo: " http://www.pucp.edu.pe ". 

3. Especificalo como "_blank". 
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Paso 6 

Ahora trabajaremos con la imagen, seleccionala y en el Inspector de propiedades escoge lo 
siguiente: 



• vinculo: 
http://www.pucp.edu.pe 

• destino: blank 



Origen fiotos/pucp.jpg 



Vinculo tpi/Zwww.pucp.edu.pe Q 



Destino _blank 



Original 



Alt 

Edicion 



Borde 0 



Alinear 



Predeterrninado 



Paso 7 

Presiona F12, guarda y revisa el 
resultado obtenido, es decir, al 
hacer die en la imagen, debe 
abrirse otra ventana con la web 
de la PUCP y de la misma forma 
debe suceder con las palabras 
seleccionadas. 



No te olvides de agregar una pequena 
columna entre el texto y la imagen, de no 
mas de 10 pixeles de ancho. 




x 



Actividad de investigacion: 

En tus paginas favoritas de Internet, revisa las imagenes que se encuentran 
en ellas. Si haces die sobre las mismas, <Lque sucede?, <Lte direccionan a otras 
paginas relacionadas o a la fuente de las imagenes? 



5.6 INSERTANDO UN HIPERVINCULO MEDIANTE ZONAS INTERACTIVAS 



Ya has insertado vmculos en imagenes sin problemas, pero 
<Lque pasaria si quisieras tener en una misma imagen dos a 
mas vmculos disponibles a diferentes destinos? Para 
responder a la pregunta, realiza la siguiente actividad. 



Actividad 5: 
Genera vmculos mediante zonas 
interactivas que se crearan para 
enlazar el menu principal de tu web, 
de acuerdo a como observas en el 
ejemplo. 




Inicio 

Data 

Videos 

Musica 

Nosotros 
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Antes de desarrollar la actividad, es importante que sepas que las zonas interactivas son 
creadas sobre todo dentro de una imagen. En la imagen que observas, que ha sido trabajada 
con Photoshop (pero que tambien puedes realizar en Paint u otro programa de diseno), en la 
parte inferior derecha, se encuentra la lista del menu principal de la web, eso es lo que 
generaras al desarrollar la actividad. 



Sigue los pasos que te presentamos a continuacion a fin de que realices la actividad. 
Paso 1 

Abre el documento entrada.html. 



IJLI t Imagenes : Imagen 



Paso 2 

Dirigete a la barra Insertar y en 
las opciones de Imagenes 
selecciona Dibujar zona 
interactiva rectangular. 



^ Andaje con nombre 

Regla horizontal 
H Tabla 

|H|^ynsertar etiqueta Div 
jS t Irfegenes : Imagen 

Media 
@ Fecha 



SI Imagen 

^ Marcador de position de imagen 

Imagen de sustitucion 
%j HTML de Fireworks 
pit Barra de navegacion 



Dibujarzona interactiva rectangular 



p_ 

+ 0 Dibujarzona interactiva oval \^ 
Dibujarzona interactiva poligonal 



Paso 3 

El cursor se volvera una cruz con la cual debes dibujar el rectangulo donde se colocara el 
hipervmculo. Lo dibujas alrededor de la palabra "Inicio". 



Data 



i- 



Describa el rnapa de imagenes en el carnpo 'alt' del inspector 
Propiedades. Es.ta description ayudara a las. personas con problernas de 
vision que utilizan herramientas que les leen paginas Web. 



Aceptar 



J 



Ten en cuenta: 
Para editar una zona 
interactiva, simplemente 
haz die en la zona verde y 
cambia lo deseado en el 
Inspector de propiedades. 
Tambien puedes modificar 
el tamano del rectangulo 
con tan solo llevar el 
cursor a una esquina y 
modificarlo manualmente. 



Paso 4 




Dirigete al Inspector de propiedades y 


Vinculo 


inicio. html 




completa la siguiente informacion. 


Destino 


_sdf 
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Paso 5 

Presiona F12, guarda y verifica que el vinculo funcione en el navegador. Cuando 
pases el cursor por encima de la zona trabajada, aparecera una mano que 
confirmara que ese espacio sirve como hipervmculo. 



b 



Actividad de aplicacion: 

1. Sigue el mismo procedimiento para "data" y lo vinculas a data_enero.html. 

2. Cuando tengas las demas paginas de tu web, completa los demas vmculos. 



5.7 INSERTAR HIPERVINCULO DE CORREO ELECTRONICO 



Es casi igual que insertar los anteriores hipervmculos, 
pues tambien puede conectarse a un texto o una 
imagen. Lo unico que vana es el codigo del enlace. 



Actividad 6: 
Inserta un correo electronico como hipervmculo a 
la web creada, como observas en la siguiente 
imagen. 




muestro crecimiento depe 
hnosotros, asi r que escnber 
| Tiotici asaldi adjjm aU.com . iTe 



Sigue los siguientes pasos para que desarrolles la actividad: 



Paso 1 

Abre el documento inicio.html. 



Paso 2 

Selecciona la direccion de correo electronico y en el Inspector de propiedades busca la opcion 
Vinculo, coloca: mailtorelcorreo y como destino seleccionas blank. 



Clase cuerpo ^ B I ■= 5= ±M ±= TitLilo | 

Vinculo mailto: n0tida3aldia@gmail.com ▼ © Destino _blank ▼ 

Paso 3 

Presiona F12 y graba. Prueba haciendo die en el enlace. Para utilizar esta funcion, deberias 
utilizar un programa predeterminado para enviar correos electronicos, como Microsoft 
Outlook. 
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Actividad de investigacion: 

Investiga en la web hacia donde te llevan actualmente los enlaces de los 
correos electronicos. 



5.8 INSERTAR LOS HIPERVINCULOS DEL MENU PRINCIPAL 




Para finalizar con la creacion de tu blog, 
aprenderas a instalar el menu principal de 
navegacion de tu pagina. 



Actividad 7: 

Instala el menu principal de 
navegacion en el blog de noticias 
escolares. 



■ 



NOTICIAS AL Of A 

Blog de Noticias Escolares 




La cartelera del one de esta s< 

The Green Hornet 

Animal Kingdom 

De dioses y hombres 

La danza 



Mas mformacion en La Butaca http://www.labuzaca.net/ 



La PUCP nos ha mvitado este )ueves, a partiapar de una visita a sus ' 
instalaciones, donde nos explicaran todas las carreras que henen, a 
como mostrarnos sus instalaaones: aulas, pabellones, bibliotecas, j 
canchas de deporte, facultades, cafeterias, etc. 



febrero marzo abnl mayo junto 
julio agosto setiembre octubre noviembre diciembre 




Sigue cada uno de los pasos que te presentamos a continuacion, los cuales te permitiran 
realizar la actividad: 



Paso 1 

Abre el documento esquema.html, instala el menu que ya utilizaste en tu pagina de 
entrada.html y 
divide el ancho de 
cada celda 
utilizada en 100. 

Paso 2 

Crea una regla CSS llamada barramenu que incluiras al menu creado, con las siguientes 
caracteristicas: Comic Sans, 18px, bolder, color bianco, background color #F90, Text align: 
center. El resultado es el siguiente: 





1 100- 


i 100- — 


1 100- — 




1 100- 1 


NOTICIAS AL DIA 


Jnicio 


Pataj 


Videos 


iMusica 


SNosotros 


Blog de Noticias Escolares \ 









NOTICIAS AL DIA 

Blog de Noticias Escolares 
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Por cuestiones esteticas, tambien colocaremos el mismo background color #F90, al fondo de 
las otras dos celdas de la izquierda. 



Actividad de aplicacion: 

Crea la pagina nosotros.html y con todo lo aprendido hasta el momento, en 
base al esquema de la web, incluye el nombre de los corresponsales o 
colaboradores, del director general, del editor, etcetera que participaron en 
la elaboracion del blog de noticias escolares. 

\ 



Paso 3 

Ahora crea 
hipervmculos a 
pagina creada. 




Paso 4 

Para cambiar los colores de los enlaces, debes ir a Propiedades de pagina, Vmculos CSS, y 
editar la informacion. Color de vinculo: #000, vinculo de sustitucion: #333, vmculos activos: 
#666. El resultado es el siguiente: 



NOTICIAS AL DIA 

Blog de Noticias Escolares 



Inicio 



Data 



Videos Musica Nosotros 



Actividad de aplicacion: 

Ahora tienes que llevar el nuevo esquema del encabezado a todas las demas 
paginas de tu web, para que sea uniforme. Asimismo, no te olvides de colocar 
el fondo en todas tus paginas (la de entrada.html, puede ser opcional). Si es 
necesario, cambia los vmculos CSS en algunos casos. 
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dCUANTO APRENDI? 




Muy bien, ya has terminado con el estudio del curso, ahora 
te invito a que tu mismo evalues cuanto has aprendido. 
Para ello, desarrolla las actividades que te proponemos a 



continuacion. 



1. Responde a las siguientes preguntas: 

a. Senala cuales son los pasos que debes seguir para insertar un hipervmculo 
mediante zonas Interactivas. 

b. iPor que son importantes los hipervmculos? 

c. dCual es la diferencia entre _blank y _self al insertar hipervmculos? 

2. Observa la siguiente imagen e indica las partes que tiene la web, respondiendo las 
siguientes preguntas: icuantas tablas contabilizas?, icuantos hipervmculos observas?, 
icuales crees que serian los pasos para obtener este producto? 



inimo (toertdo'a ® El 19|unio 2008 



Susana Baca 




TJy repertoire s bom old and new it has to be that way 
That's how you mature in life and how you grow into 
your culure I have tradihonal songs about the life of out 
grandparents in the countrysde others are more about 

golpe e tierra There are songs more tied to city bfe and 
more composed music the waltz, the manners and the 
zamacueca Then there are those which «i ther joy and 



6.884 plays ♦ i *• Afro-Peruvan culture they are mi 



24 627 plays + 



The r essence of Susana Baca's talent tea in th 



Elabora una pagina parecida a esta utilizando las 
herramientas aprendidas. Al termino, explica cada 
uno de los pasos que has seguido para su 
elaboracion, asignale un nivel de dificultad (alto, 
medio, bajo) e indica por que lo has escogido. 




Roberto G. Bolanos o 

@ChespiritoRGB 

Cuando mipapd me vio penso que el doctor le esta 
exprimiendo un barrito a mi mama, el problema er 
edad. Mipapd tenia 1 6 anos. mi mama i4yyo2... 



Tweets Favorites Following • Followers - Lists 



ChespiritoRGB 

ForumChaves jA mi tambien pero ultimamente me ha e 
ganando la "fatiga" (Por la edad. supongo). 



ChespiritoRGB 

AlbertoCiurana jExcelente Beto! Un abrazo 



ChespiritoRGB Roberto G Bolanos 
ChespirrtoJAP I Teregomezf EI_Universal_Mx 
gracielagomez Gracias. Fundacion 
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INTEGRANDO LO APRENDIDO 



En el capitulo anterior, has configurado el sitio web de tu 
blog, asi como el esquema. Aplicando todo lo aprendido en 
este capitulo, finaliza los ultimos detalles de tu web. 

\ 



dQue debo hacer para presentar la quinta parte de mi proyecto? 

1) Identifica donde puedes colocar enlaces exteriores y crea el hipervmculo hacia otras 
paginas. 

2) Busca las zonas interactivas que quieras realizar en tu blog. 

3) Coloca el menu del esquema principal de tu blog. 

Indicaciones generales para el proyecto 

Tanto el boletm como el blog lo entregaras a tu profesor en un CD o DVD, donde colocaras 
toda la carpeta proyecto_dreamweaver. Asimismo, entregaras, de manera impresa, la parte 
relacionada a la fundamentacion de ambos trabajos. 
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